by 이듬(E.UID)

font-face()

CSS 폰트 페이스(Font Face) 속성 믹스인

용도

웹폰트를 직접 정의하는 @font-face 속성을 빠르고 효율적으로 처리할 때 사용하는 믹스인입니다.

사용법

font-face() 믹스인에 폰트 이름, 파일 이름, 두께, 기울기 값을 전달합니다.

font-face($font-name:stirng, $file-name:string, $weight:string, $style:string, $support-legacy:bool)

@include font-face('Spoqa Han Sans', '../fonts/spoqaHanSans');

매개변수(parameter)

유형(type)

필수(required)

기본 값(default)

$font-name

string

✔︎

$file-name

string

✔︎

$weight

string

normal

$style

string

normal

$support-legacy

bool

false

위 예시 코드는 아래의 CSS로 컴파일 되어 출력됩니다.

@font-face {
  font-family: "Spoqa Han Sans";
  src: url("../fonts/spoqaHanSans.eot");
  src: local("SpoqaHanSans"), local("Spoqa Han Sans"), local("Spoqa-Han-Sans"), url("../fonts/spoqaHanSans.eot?#iefix") format("embedded-opentype"), url("../fonts/spoqaHanSans.woff") format("woff");
  font-style: normal;
  font-weight: normal;
}

로직

font-face() 믹스인은 다음의 로직에 의해 작성되었습니다. 

@mixin font-face(
  $font-name,
  $file-name,
  $weight: normal,
  $style: normal,
  $support-legacy: false
) {
  @font-face {
    font-family: quote($font-name);
    src: url($file-name + '.eot');

    // 공백을 하이픈 기호로 변경하는 폰트 이름
    $space-to-hypened-font-name: str-replace($font-name, ' ', '-');
    // 공백을 제거하는 폰트 이름
    $removed-space-font-name: str-replace($font-name, ' ', '');

    // local() 함수 + url() 함수 사용하는 폰트 소스 코드
    $font-source: 'local("#{$removed-space-font-name}"), local("#{$font-name}"), local("#{$space-to-hypened-font-name}"), url("#{$file-name}.eot?#iefix") format("embedded-opentype"), url("#{$file-name}.woff") format("woff")';

    // 구형 브라우저 호환을 위한 추가 문자열 설정
    @if $support-legacy {
      $font-source-legacy: ', url("#{$file-name}.ttf") format("truetype"), url("#{$file-name}.svg##{$font-name}") format("svg")';
      $font-source: str-insert($font-source, $font-source-legacy, -1);
    }

    src: unquote($font-source);
    font-style: $style;
    font-weight: $weight;
  }
}

  1. 전달 받은 폰트 이름과 파일 이름을 보간(interpolation) 처리

  2. 전달 받은 폰트 이름을 하이픈(-), 공백으로 변경된 이름을 생성하여 local() 함수의 값으로 보간 설정

  3. 구형 브라우저 호환 설정이 참일 경우, 구형 브라우저 호환 문자 값 추가 설정

  4. 최종적으로 폰트 소스 값을 묶은 인용 구문을 제거하여 소스(src) 값으로 설정

  5. 전달된 폰트의 두께, 기울기 설정을 설정 (전달된 인자가 없을 경우 기본 값 사용)

참고

믹스인에 사용된 Sass의 빌트인 모듈은 다음과 같습니다.

믹스인에 사용된 자체 제작한 모듈은 다음과 같습니다.

Previousfont()Nextfont-size-padding()

Last updated