> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/scss-mixins/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/scss-mixins/mixins/font/font-face.md).

# font-face()

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

## 용도 <a href="#use" id="use"></a>

웹폰트를 직접 정의하는 [@font-face](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face) 속성을 빠르고 효율적으로 처리할 때 사용하는 믹스인입니다.

## 사용법 <a href="#usage" id="usage"></a>

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

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

```ruby
@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로 컴파일 되어 출력됩니다.

```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;
}
```

## 로직 <a href="#logic" id="logic"></a>

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

```javascript
@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](https://sass-lang.com/documentation/interpolation)) 처리
2. 전달 받은 폰트 이름을 하이픈(-), 공백으로 변경된 이름을 생성하여 local() 함수의 값으로 보간 설정
3. 구형 브라우저 호환 설정이 참일 경우, 구형 브라우저 호환 문자 값 추가 설정
4. 최종적으로 폰트 소스 값을 묶은 인용 구문을 제거하여 소스(src) 값으로 설정
5. 전달된 폰트의 두께, 기울기 설정을 설정 (전달된 인자가 없을 경우 기본 값 사용)

## 참고 <a href="#reference" id="reference"></a>

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

* [@mixin / @include](https://sass-lang.com/documentation/at-rules/mixin)
* [@if / @else](https://sass-lang.com/documentation/at-rules/control/if)
* [quote()](https://sass-lang.com/documentation/modules/string#quote)
* [unquote()](https://sass-lang.com/documentation/modules/string#unquote)
* [str-insert()](https://sass-lang.com/documentation/modules/string#insert)

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

* [str-replace()](/scss-mixins/utilities/string/str-replace.md)