.ttf 및 CSS를 사용하여 사용자 정의 글꼴 포함

.ttf 글꼴을 웹 페이지에 통합하려고 하지만 어려움에 직면합니다. 코드를 살펴보겠습니다.

@font-face {
    font-family: 'oswald';
    src: url('/font/oswald.regular.ttf');
}

문제는 어디에 있습니까?

.ttf 파일만 포함하는 것만으로는 브라우저 간 호환성이 충분하지 않습니다. 다양한 브라우저를 포괄하려면 여러 글꼴 형식이 필요합니다.

종합 솔루션:

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('webfont.woff') format('woff'), /* Modern Browsers */
         url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

이 코드는 웹 글꼴에 .eot, .woff, .ttf 및 SVG 형식이 있다고 가정합니다. Font Squirrel 또는 Transfonter와 같은 웹 글꼴 생성기는 이 프로세스를 자동화할 수 있습니다.

최신 접근 방식:

최신 브라우저는 .woff 글꼴을 선호하므로 코드도 단순화할 수 있습니다.

@font-face {
    font-family: 'MyWebFont';
    src: url('myfont.woff') format('woff'), /* Chrome 6 , Firefox 3.6 , IE 9 , Safari 5.1  */
         url('myfont.ttf') format('truetype'); /* Chrome 4 , Firefox 3.5, Opera 10 , Safari 3—5 */
}

추가 리소스:

• CSS 트릭: @font-face 사용: https://css-tricks.com/snippets/css/using- Font-face/
• 글꼴을 사용할 수 있나요?: https://caniuse.com/fontface