웹 브라우저에서 .otf 글꼴 사용

온라인에서 글꼴 평가판이 필요한 웹 사이트에서 작업하고 있습니다. 글꼴은 모두 .otf입니다.

글꼴을 포함시켜 모든 브라우저에서 작동하게하는 방법이 있습니까?

그렇지 않은 경우 다른 대안이 있습니까?

다음 OTF과 같이 @ font-face를 사용 하여 글꼴을 구현할 수 있습니다 .

@font-face {
    font-family: GraublauWeb;
    src: url("path/GraublauWeb.otf") format("opentype");
}

@font-face {
    font-family: GraublauWeb;
    font-weight: bold;
    src: url("path/GraublauWebBold.otf") format("opentype");
}

당신이 지원하려는 경우에는 최신 브라우저의 다양한 난으로 전환 할 추천 WOFF및 TTF글꼴 유형. WOFF유형은 모든 주요 데스크탑 브라우저에서 구현되는 반면 TTF이전 Safari, Android 및 iOS 브라우저의 대체 유형입니다. 글꼴이 무료 글꼴 인 경우 예를 들어 onlinefontconverter를 사용하여 글꼴을 변환 할 수 있습니다 .

@font-face {
    font-family: GraublauWeb;
    src: url("path/GraublauWebBold.woff") format("woff"), url("path/GraublauWebBold.ttf")  format("truetype");
}

더 이상 IMHO가 필요하지 않은 거의 모든 브라우저 를 지원 하려면 다음과 같은 글꼴 유형을 추가해야합니다.

@font-face {
    font-family: GraublauWeb;
    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 */
}

이러한 모든 유형이 구현 된 이유와 해킹에 대한 자세한 내용은 여기를 참조하십시오 . 어떤 브라우저에서 어떤 파일 형식이 지원되는지에 대한 자세한 내용을 보려면 다음을 참조하십시오.

@ font-face 브라우저 지원

EOT 브라우저 지원

WOFF 브라우저 지원

TTF 브라우저 지원

SVG-Fonts 브라우저 지원

도움이 되었기를 바랍니다