.ttf를 사용하여 사용자 정의 글꼴을 포함하고 브라우저 간 호환성을 보장하는 방법은 무엇입니까?

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

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

<code class="css">@font-face {
    font-family: 'oswald';
    src: url('/font/oswald.regular.ttf');
}</code>

문제는 어디에 있습니까?

.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 글꼴을 선호하므로 코드도 단순화할 수 있습니다.

<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>

추가 자료:

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

위 내용은 .ttf를 사용하여 사용자 정의 글꼴을 포함하고 브라우저 간 호환성을 보장하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!