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

웹 브라우저에서 .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 브라우저 지원

도움이 되었기를 바랍니다

---

로부터 구글 글꼴 디렉토리 예 :

@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: local('Tangerine'), url('http://example.com/tangerine.ttf') format('truetype');
}
body {
  font-family: 'Tangerine', serif;
  font-size: 48px;
}

이것은 .ttf와 크로스 브라우저에서 작동하며 .otf와 함께 작동 할 수 있다고 생각합니다. ( Wikipedia에 따르면 .otf는 대부분 .ttf와 호환됩니다.) 그렇지 않으면 .otf를 .ttf 로 변환 할 수 있습니다

좋은 사이트는 다음과 같습니다.

• 좋은 입문서 :

  http://www.alistapart.com/articles/cssatten

• 다른 정보 :

  http://randsco.com/index.php/2009/07/04/p680

참고 URL : https://stackoverflow.com/questions/3245141/using-otf-fonts-on-web-browsers