css – Safari和IE无法读取TTF和EOT字体

前端之家收集整理的这篇文章主要介绍了css – Safari和IE无法读取TTF和EOT字体前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
>我在Safari中阅读字体时遇到问题.我将OTF转换为TTF – 两种粗体和常规字体.两者都适用于Chrome和Firefox.但在Safari中,只有粗体字体才有效,而常规则不然.
> IE不读取我从网站转换的EOT字体.有没有更好的方法将OTF转换为EOT?

这是我的代码

  1. <style type="text/css">
  2. //Bariol_Bold
  3. @font-face{
  4. font-family: Bariol_Bold;
  5. src:url("fonts/bariol_bold.eot"); /*For ie browser*/
  6. }
  7.  
  8. @font-face{
  9. font-family: Bariol_Bold;
  10. src:url("fonts/bariol_bold.ttf"); /*For other browsers*/
  11. }
  12.  
  13. //Bariol_Regular
  14. @font-face{
  15. font-family:bariol_regular;
  16. src:url("fonts/bariol_regular.eot"); /*For ie browser*/
  17. }
  18.  
  19. @font-face{
  20. font-family: bariol_regular;
  21. src:url("fonts/bariol_regular.ttf"); /*For other browsers*/
  22. </style>
  23.  
  24. <p style="font-family: Bariol_Bold; font-size: 20px;">hello world</p>
  25. <p style="font-family: bariol_regular; font-size: 20px;">hello world</p>

解决方法

您应该检查 Paul Irish’s Bulletproof @font-face SyntaxFontSpring’s @font-face Syntax,它需要在不同文件类型中对相同字体进行多次声明,以便为多个浏览器提供服务.

基本声明就像

  1. @font-face {
  2. font-family: 'MyFontFamily';
  3. src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),url('myfont-webfont.woff') format('woff'),url('myfont-webfont.ttf') format('truetype'),url('myfont-webfont.svg#svgFontName') format('svg');
  4. }

我也更喜欢FontSquirrel’s @font-face Generator,但你可以谷歌其他替代品. FontSquirrel只需要转换一种字体,它将为您提供一个基本的.zip文件,其中包含必要的字体类型以及生成的字体的示例演示.

猜你在找的CSS相关文章