文章/答案/技术大牛

发布

社区首页 >问答首页 >字体不适用于所有浏览器

问字体不适用于所有浏览器
EN

Stack Overflow用户

提问于 2016-06-12 16:15:12

回答 1查看 1.3K关注 0票数 0

我试着用字体向我的页面添加几个字体，但不幸的是，即使我按照说明使其与浏览器兼容，它也只能在Chrome和Safari上工作，而且我也找不出原因。我尝试了两种不同的方法。

第一个看起来是这样的：

@font-face {
  font-family: 'robotoblack';
  src: url('roboto-black-webfont.eot'); /* per IE 5-8 */
  src: local('☺'), /* direttiva local per IE */
  url('roboto-black-webfont.woff') format('woff'),    /* Firefox 3.6+, Chrome 5.0+, IE 9.0+ */
        url('roboto-black-webfont.ttf') format('truetype'); /* Opera, Safari */
}

@font-face {
  font-family: 'robotomedium_italic';
  src: url('roboto-mediumitalic-webfont.eot'); /* per IE 5-8 */
  src: local('☺'), /* direttiva local per IE */
  url('roboto-mediumitalic-webfont.woff') format('woff'),    /* Firefox 3.6+, Chrome 5.0+, IE 9.0+ */
        url('roboto-mediumitalic-webfont.ttf') format('truetype'); /* Opera, Safari */
}

第二个是这样的：

@font-face {
  font-family: 'robotoblack';
  src: url('roboto-black-webfont.eot'); /* IE9 Compat Modes */
  src: url('roboto-black-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('roboto-black-webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('roboto-black-webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('roboto-black-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('roboto-black-webfont.svg#robotoblack') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'robotomedium_italic';
  src: url('roboto-mediumitalic-webfont.eot'); /* IE9 Compat Modes */
  src: url('roboto-mediumitalic-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('roboto-mediumitalic-webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('roboto-mediumitalic-webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('roboto-mediumitalic-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('roboto-mediumitalic-webfont.svg#robotomedium_italic') format('svg'); /* Legacy iOS */
}

你能告诉我这两种方法中哪一种最好吗？有什么建议让它在所有浏览器上工作吗？

如果您想要查看该示例，可以在这里获得：

在这里输入链接描述

希望你能帮上忙！提前感谢

干杯

恩里科

font-face

html

css

cross-browser

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-06-12 17:06:44

我知道答案了，你不正确的称呼字体家族。确保使用@字体脸字体系列声明。在这种情况下，使用“机器人黑”而不是“机器人黑”。并在调用字体时使用css中的引号。

我还建议先调用@字体-face，然后再调用css中的字体系列。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/37776453

复制

相似问题

问字体不适用于所有浏览器
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问字体不适用于所有浏览器EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问字体不适用于所有浏览器
EN