최적의 브라우저 간 호환성을 위해 CSS에 .ttf 글꼴을 포함하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

최적의 브라우저 간 호환성을 위해 CSS에 .ttf 글꼴을 포함하는 방법은 무엇입니까?

Susan Sarandon

풀어 주다： 2024-11-05 21:47:02

원래의

721명이 탐색했습니다.

How to Include a .ttf Font in CSS for Optimal Cross-Browser Compatibility?

CSS에 .ttf 글꼴 포함: 종합 가이드

맞춤 글꼴을 웹 페이지에 통합하기 위해 CSS는 @font- 얼굴 규칙. 하지만 단순히 .ttf 파일을 포함하는 것만으로는 브라우저 간 호환성이 충분하지 않을 수 있습니다.

최적의 글꼴 파일 조합

최적의 호환성을 위해서는 여러 글꼴을 사용하는 것이 좋습니다. 파일 형식:

<code class="css">@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 */
}</code>

로그인 후 복사

이 코드에서는 .eot, .woff, .ttf 및 svg 글꼴 형식이 있다고 가정합니다. 프로세스를 단순화하려면 Font Squirrel 또는 Transfonter와 같은 웹 글꼴 생성기를 사용하세요.

최신 접근 방식: WOFF 글꼴 유형

최신 브라우저는 .woff 글꼴 유형을 지원합니다. 코드를 다음과 같이 단순화할 수 있습니다.

<code class="css">@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 */
}</code>

로그인 후 복사

추가 리소스