내 웹 사이트에 .woff 글꼴을 어떻게 사용합니까?

CSS가 액세스 할 수 있도록 글꼴을 어디에 배치합니까?

.woff 파일에서 브라우저에 비표준 글꼴을 사용하고 있습니다. 'awesome-font.woff'파일에 저장된 'awesome-font'라고 가정 해 봅시다.

woff 파일을 생성 한 후에는 나중에 모든 CSS 스타일에서 사용할 수있는 font-family를 정의해야합니다. 다음은 글꼴 모음 (일반, 굵게, 굵은 기울임 꼴, 기울임 꼴) 서체를 정의하는 코드입니다. fonts하위 디렉터리에 4 개의 * .woff 파일 (언급 된 서체 용)이 있다고 가정 합니다.

CSS 코드에서 :

@font-face {
    font-family: "myfont";
    src: url("fonts/awesome-font.woff") format('woff');
}

@font-face {
    font-family: "myfont";
    src: url("fonts/awesome-font-bold.woff") format('woff');
    font-weight: bold;
}

@font-face {
    font-family: "myfont";
    src: url("fonts/awesome-font-boldoblique.woff") format('woff');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: "myfont";
    src: url("fonts/awesome-font-oblique.woff") format('woff');
    font-style: italic;
}

정의를 마친 후에는 다음과 같이 작성할 수 있습니다.

HTML 코드에서 :

<div class="mydiv">
    <b>this will be written with awesome-font-bold.woff</b>
    <br/>
    <b><i>this will be written with awesome-font-boldoblique.woff</i></b>
    <br/>
    <i>this will be written with awesome-font-oblique.woff</i>
    <br/>
    this will be written with awesome-font.woff
</div>

CSS 코드에서 :

.mydiv {
    font-family: myfont
}

CSS 스타일 시트에 포함될 수있는 woff 파일 생성을위한 좋은 도구는 여기 에 있습니다 . 모든 woff 파일이 최신 Firefox 버전에서 올바르게 작동하는 것은 아니며이 생성기는 '올바른'글꼴을 생성합니다.

@font-face스타일 시트에서 이와 같이 선언해야합니다.

@font-face {
  font-family: 'Awesome-Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome-Font'), local('Awesome-Font-Regular'), url(path/Awesome-Font.woff) format('woff');
}

이제이 글꼴을 단락에 적용하려면 다음과 같이 사용하십시오.

p {
font-family: 'Awesome-Font', Arial;
}

더 많은 참조