Question

我在.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

Answer 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

似乎无法改变字体类型

1 个答案: