使用自定义字体的问题答案

【问题标题】：problems using custom fonts使用自定义字体的问题
【发布时间】：2015-05-08 07:48:39
【问题描述】：

我一直在尝试在我的 CSS 中使用自定义字体“anders”，但不明白为什么它不起作用。

这是我的代码：

@font-face { 字体系列：'andersregular'； `src: url('Anders-webfont.eot'); } h1 { ``字体系列：'andersregular'； }

我将不胜感激。

【问题讨论】：

路径是否正确？检查您的开发者控制台。你能看到字体被加载了吗？
感谢您的回答。我不确定开发者控制台是什么，我现在只是在使用文本编辑器？
根据您使用的浏览器，您可以使用内置的开发人员工具。快速的 Google 搜索将帮助您找到更多信息。我猜字体的路径是错误的。字体文件在您的项目中的什么位置？你的css文件在哪里？一个基本的项目结构将帮助我解决您的问题。
啊，好的，不，当我查看开发工具时，它似乎没有加载。我的字体文件与我的 index.html 和 css 文件在同一个文件中 - 它们都在同一个文件夹中。
啊，好的，不，当我查看开发工具时，它似乎没有加载。我的字体文件与我的 index.html 和 css 文件在同一个文件中 - 它们都在同一个文件夹中。

标签： fonts font-face

【解决方案1】：

EOT 字体文件格式仅供 IE 使用。您是否使用其他浏览器？您需要包含更多格式以支持其他浏览器。

您需要使用Font Squirrel Web Font Generator 等服务将字体转换为其他必要的格式

并以这种方式包含其他格式：

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

【讨论】：