CSS的@font-face属性支持.otf/.ttf字体吗？哪些扩展名合法？

当然可以在@font-face规则里使用.otf（OpenType Font）和.ttf（TrueType Font）格式的字体文件！这两种是网页字体里的经典格式，几乎所有主流现代浏览器（Chrome、Firefox、Safari、Edge等）都能很好地支持它们。

针对你给出的这段代码：

@font-face{ 
  font-family: myriad; 
  src: url(myriadpro.ttf); 
}

除了.ttf，以下这些字体文件扩展名也适用于这类用法：

• .otf：和TTF同属通用字体标准，浏览器支持度和TTF基本一致
• .woff/.woff2：强烈推荐优先选用，这是专门为网页优化的字体格式，文件体积更小、加载速度更快，而且现代浏览器的支持覆盖率几乎是100%
• .eot：仅针对旧版IE（IE8及更早版本）的专用格式，如果你的项目不需要兼容这些超老浏览器，完全可以忽略它
• .svg：早期iOS Safari和部分旧版桌面Safari支持的格式，现在已经很少需要用到了

另外给个小提示：为了兼顾兼容性和加载性能，实际项目中通常会同时提供多种格式的字体，并通过format()声明帮浏览器快速识别，示例如下：

@font-face {
  font-family: 'myriad';
  src: url('myriadpro.woff2') format('woff2'),
       url('myriadpro.woff') format('woff'),
       url('myriadpro.ttf') format('truetype'),
       url('myriadpro.otf') format('opentype');
}

内容的提问来源于stack exchange，提问作者user13346803