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 这很有趣，因为它正在我的localhost上工作，所有路径都是正确的。不能在我的服务器上工作，但我在我的其他网站上的代码中做了同样的工作，并且在那里工作......

Answer 1

使用以下语法：

<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 2

'KlavikaLT'不是像Courier这样的标准字体。除非你说出来，否则你的浏览器根本不知道那个字体是什么。

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

将导入发布在您的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复制的示例。

如果您使用自己服务器上托管的自定义字体，则可以使用上述语法，但将网址替换为您自己的网址。每个应包含@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 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');
}

字体表面根本不起作用

3 个答案: