字体根本不起作用

Question

我已经阅读了很多帖子并使我的字体代码与其他答案中的相同，但它仍然无法正常工作...

@font-face {
    font-family: 'KlavikaLT';
    src: url('Klavika-Light.otf') format('opentype');
}

@font-face {
    font-family: 'KlavikaLTit';
    src: url('Klavika-LightItalic.otf') format('opentype');
}

@font-face {
    font-family: 'KlavikaBD';
    src: url('Klavika-Bold.otf') format('opentype');
}

@font-face {
    font-family: 'KlavikaBDit';
    src: url('Klavika-BoldItalic.otf') format('opentype');
}

@font-face {
    font-family: 'KlavikaRG';
    src: url('Klavika-Regular.otf') format('opentype');
}

.footerleft
{
    font-family: KlavikaLT;
}

.footerright
{
    font-family: KlavikaBDit;
}

这是我使用的示例代码。字体与样式表文件位于同一文件夹中。我哪里出错了？

编辑 1 这很有趣，因为它在我的本地主机上工作并且所有路径都是正确的。不在我的服务器上工作，但我在我的其他网站上的代码中做了同样的事情，它在那里工作...

Answer 1

'KlavikaLT' 不是像 Courier 这样的标准字体。除非您告诉浏览器，否则您的浏览器不知道该字体是什么。

您可以通过几种方式告诉浏览器您的字体：

Post css:

顶部的导入

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

使用 HTML 导入，在您的 CSS 上方：

<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

或使用JavaScript:

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Open+Sans::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>

示例复制自 Google Fonts。

如果您使用的是托管在您自己的服务器上的自定义字体，您可以使用上述语法，但将 url 替换为您自己的。每个都应包含 @font-face，如下所示：

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format('woff2');
}

Answer 2

使用这个语法：

<style>
   @font-face {
       font-family: 'KlavikaLT';
       src: url('KlavikaLT.eot');
       src: url('KlavikaLT.eot?#iefix') format('embedded-opentype'),
            url('KlavikaLT.woff') format('woff'),
            url('KlavikaLT.ttf') format('truetype'),
            url('KlavikaLT.svg#KlavikaLT') format('svg');
       font-weight: normal;
       font-style: normal;
   }
   body { font-family: "KlavikaLT", serif; }
  </style>

确保文件路径正确。

这是 @font-face 的规范：

@font-face {
    [font-family: <family-name>;]?
    [src: [ <uri> [format(<string>#)]? | <font-face-name> ]#;]?
    [unicode-range: <urange>#;]?
    [font-variant: <font-variant>;]?
    [font-feature-settings: normal|<feature-tag-value>#;]?
    [font-stretch: <font-stretch>;]?
    [font-weight: <weight>];
    [font-style: <style>];
}

Answer 3

刚刚添加了更多字体扩展名，例如 .ttf 和 .woff。现在它运行良好，但不知道为什么 .otf 根本不起作用。干杯！

@font-face
{
    font-family: KlavikaLT;
    src: url('fonts/KlavikaLT.otf') format('opentype'),
         url('fonts/KlavikaLT.ttf') format('truetype'),
         url('fonts/KlavikaLT.woff') format('woff');
}

字体根本不起作用

Font-face not working at all

css

font-face