字體面都

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