时间戳

首页 > 解决方案 > 什么是现代的@font-face 声明？

html - 什么是现代的@font-face 声明？

问题描述

多年来，我使用了以下字体声明：

@font-face {
  font-family: 'museo_sans_rounded';
  font-style: normal;
  font-weight: 500;
  src:  url('../fonts/museo/museosansrounded-300-webfont.eot');
  src:  url('../fonts/museo/museosansrounded-300-webfont.eot?#iefix') format('embedded-opentype'), 
        url('../fonts/museo/museosansrounded-300-webfont.woff2') format('woff2'), 
        url('../fonts/museo/museosansrounded-300-webfont.woff') format('woff'), 
        url('../fonts/museo/museosansrounded-300-webfont.ttf') format('truetype'), 
        url('../fonts/museo/museosansrounded-300-webfont.svg#museo_sans_rounded300') format('svg');
}

现在我只需要支持 IE11 和所有现代浏览器。这个声明可以简化吗？

标签： htmlcssbrowserfonts

解决方案

根据这篇关于使用嵌入自定义字体的文章@font-face：

@font-face 规则允许在网页上加载自定义字体。添加到样式表后，该规则会指示浏览器从其托管位置下载字体，然后按照 CSS 中的指定显示它。

不同的字体有不同级别的浏览器支持。趋势似乎是您可以提供 WOFF 和 WOFF2，但这是他们对“尽可能深的浏览器支持”的建议：

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

对于 IE11：

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff'),
       url('myfont.ttf') format('truetype');
}

推荐阅读