似乎无法更改字体类型答案

【问题标题】：Can't seem to change font type似乎无法更改字体类型
【发布时间】：2015-12-03 00:32:27
【问题描述】：

我在 .otf 文件中有几个自定义字体：

我的 index.html 文件如下所示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>My Website</title>
    <link rel="stylesheet" href="css/style.css" >
</head>
<body>
    <h3 style = "font-family: customBold;">Hello</h3>
    <h3 style = "font-family: customLight;">Hello</h3>
    <h3 style = "font-family: customRegular;">Hello</h3>
    <h3 style = "font-family: customThin;">Hello</h3>
</body>
</html>

我的 style.css 是这样的

@font-face {
    font-family: customBold;
    src: url(fonts/Custom-Bold.otf);
}

@font-face {
    font-family: customLight;
    src: url(fonts/Custom-Light.otf);
}

@font-face {
    font-family: customRegular;
    src: url(fonts/Custom-Regular.otf);
}

@font-face {
    font-family: customThin;
    src: url(fonts/Custom-Thin.otf);
}

但是，h3 的字体不会改变。

我跟着这个：

http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

【问题讨论】：

你把所有字体文件都放到css/fonts文件夹了吗？
如果您为浏览器使用调试器，您将看到任何错误/丢失文件等。给开发者的好建议。
index.html 和 style.css 位于项目主目录中。里面还有另一个名为“fonts”的目录，其中包含 .otf 文件？

标签： html css web fonts

【解决方案1】：

尝试使用所有类型，如 .otf、.eot、.ttf 等。将这些类型添加到您的 css 文件中。

不同浏览器不支持少数类型。查看http://caniuse.com/#feat=ttf

查看下面的代码，我们如何添加在不同浏览器上工作所需的所有格式。参考来自https://css-tricks.com/snippets/css/using-font-face/

@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 */
}

也可以参考这个链接了解更多信息（类似问题），Using .otf fonts on web browsers

【讨论】：