字体面都

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

只需添加字体的更多的扩展，像.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'); 
} 

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

使用此语法：

<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>]; 
}