使用 CSS 包含自定义字体以使其与最大浏览器兼容的最佳方法是啥？

Posted 2023-03-13

【中文标题】使用 CSS 包含自定义字体以使其与最大浏览器兼容的最佳方法是啥？

【英文标题】：What is the best way to include custom font using CSS to make it compatible with maximum browsers?使用 CSS 包含自定义字体以使其与最大浏览器兼容的最佳方法是什么？

【发布时间】：2013-09-23 04:19:36

【问题描述】：

我尝试了各种代码来嵌入自定义字体，最后似乎在上面的 FF 和 IE8 中工作。但是IE7不支持。

@font-face 
font-family: 'xyzfont';
src: url('fonts/abc-font.eot?') format('eot'), 
     url('fonts/abc-font.woff') format('woff'), 
     url('fonts/abc-font.ttf') format('truetype');


h1, h2, h3, div span  font-family: 'xyzfont', Georgia, Arial; 

欢迎任何使其更兼容（例如 IE7）的建议。

【问题讨论】：

检查这个link。可能会对你有所帮助。

感谢 Mr_Green，链接看起来不错 :)

【参考方案1】：

这是我用来在每个浏览器中嵌入字体的 css，希望对您有所帮助：

@font-face 
font-family: 'xyzfont';
src: url('fonts/abc-font.eot'); /* IE9 Compat Modes */
src: url('fonts/abc-font.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('fonts/abc-font.woff') format('woff'), /* Modern Browsers */
     url('fonts/abc-font.ttf')  format('truetype'), /* Safari, android, ios */
     url('fonts/abc-font.svg#svgFontName') format('svg') /* Legacy iOS */

另请注意，您可以设置不带引号的字体系列，如下所示：

h1, h2, h3, div span  font-family: xyzfont, Georgia, Arial; 

您可以了解字体浏览器支持here。

fontsquirrel 可能是生成所需的每种字体格式的最佳位置。

article 解释了如何找到要在 SVG 字体的主题标签之后添加的字体 ID。

如果有人问为什么有?#iefix 用于 IE6-IE8 浏览器 eot 字体，请参阅此answer。

【讨论】：

感谢 morgul，在 IE-7/8 中运行良好。甚至我的代码似乎也可以正常工作；）非常感谢

这是对这个问题的唯一正确答案，就像一个魅力！ :)

哇，fontsquirrel.com 太棒了！几乎是一个网络字体银弹。我从 Windows 中获取了一个我喜欢的字体的 .ttf 文件，上传了它，它为我完成了所有工作。很不错。甚至为您提供使用 .svg 字体处理 IIS MIME 类型问题的指导。

【参考方案2】：

我使用这个代码;)

@font-face 
  font-family: 'BBadr';
    src: url('fonts/BBadr/BBadr.eot'); /* IE9 Compat Modes */
    src: url('fonts/BBadr/BBadr.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url("fonts/BBadr/BBadr.otf") format("opentype"), /* Open Type Font */
      url('fonts/BBadr/BBadr.woff') format('woff'),/* Pretty Modern Browsers */
      url('fonts/BBadr/BBadr.woff2') format('woff2'), /* Super Modern Browsers */
      url('fonts/BBadr/BBadr.ttf')  format('truetype'),/* Safari, Android, iOS */
      url('fonts/BBadr/BBadr.svg#BBadr') format('svg'); /* Legacy iOS */

您可以在线转换您的字体 ( ttf ( 使用此网站： Simple Online Web Font Converter: ttf otf woff woff2 eot svg otf with css stylesheet

转换字体并使用我的 css 代码（不使用站点的示例 css）

【讨论】：

您链接的网站似乎有在这里发送垃圾邮件的历史。它是您答案的组成部分吗？如果没有，我建议不要包含指向它的链接。