Sass新手技术咨询：@font-face用法与Google Font格式疑问

嘿，作为Sass新手遇到@font-face的问题很正常，我来帮你拆解这两个疑问：

1. 你给出的示例写法是否可行？每种字体格式需要对应正确的扩展名吗？ #

你的示例写法不可行，而且每种字体格式确实需要对应正确的文件扩展名和format()参数值，原因如下：

你代码里的问题在于：明明引用的是.ttf格式的文件，却给其中一个声明标注了format('opentype')——而opentype对应的是.otf扩展名的字体文件。浏览器会通过format()参数快速识别字体类型，如果参数和实际文件格式不匹配，浏览器可能会忽略这个字体声明，或者尝试解析失败，导致字体无法正常加载。

正确的做法是，每个url()指向对应格式的字体文件，同时搭配匹配的format()值。常见的字体格式对应关系：

• .ttf → format('truetype')
• .otf → format('opentype')
• .woff → format('woff')
• .woff2 → format('woff2')
• .eot → format('embedded-opentype')（针对旧版IE）

举个标准的多格式兼容写法（用Sass变量完全没问题）：

@font-face {
  font-family: 'Roboto';
  font-weight: $font-weight-light;
  src: url('../fonts/Roboto-Light.eot'); /* IE9兼容模式 */
  src: url('../fonts/Roboto-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/Roboto-Light.woff2') format('woff2'), /* 现代浏览器最优选择 */
       url('../fonts/Roboto-Light.woff') format('woff'), /* 稍旧的现代浏览器 */
       url('../fonts/Roboto-Light.ttf') format('truetype'), /* Safari、Android、iOS */
       url('../fonts/Roboto-Light.svg#Roboto') format('svg'); /* 旧版iOS */
}

2. Google Font是否仅提供.ttf格式？有没有隐藏选项获取其他格式？ #

Google Fonts不是只提供.ttf格式，相反它默认优先提供性能最好的woff2格式（现在主流浏览器都支持），并且会根据访问浏览器的User-Agent自动返回适配的字体格式（比如给旧浏览器返回woff、ttf等）。

如果你想手动获取所有格式的字体文件，可以这样做：

• 当你在Google Fonts选择好字体后，打开嵌入链接对应的CSS文件（比如把<link>标签里的URL复制到浏览器地址栏打开），你会看到里面的@font-face声明中包含了不同格式的字体文件链接，直接下载这些链接对应的文件即可。

另外补充：现在woff2是最优选择，它的文件体积比ttf小很多，加载速度更快，主流浏览器（Chrome、Firefox、Safari 10+、Edge等）都支持。如果不是要兼容非常老旧的浏览器（比如IE8及以下），其实没必要刻意使用其他格式，Google Fonts的默认嵌入代码已经帮你处理好了所有兼容场景。

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