Chrome瀏覽器沒有讀取我所有的@ font-faces

我正在爲我的頁面使用不同的字體。我在我的CSS文件中使用的代碼如下：Chrome瀏覽器沒有讀取我所有的@ font-faces

@font-face{ 
font-family:dst; 
src:url('fonts/dastnevis.ttf'), 
    url('fonts/dastnevis.eot'), 
    url('fonts/dastnevis.otf'); 
} 

@font-face{ 
font-family:hayat; 
src:url('fonts/hayat.ttf'), 
    url('fonts/hayat.eot'), 
    url('fonts/hayat.otf'); 
} 

@font-face{ 
font-family:taha; 
src:url('fonts/taha.ttf'), 
    url('fonts/taha.eot'), 
    url('fonts/taha.otf'); 
}

的問題是，Chrome瀏覽器（我使用的版本28）只讀取這些3種字體之一，這是DST，不顯示等。我使用dst作爲按鈕，hayat用於footer，taha用於body。

編輯：Firefox閱讀並顯示所有這些沒有問題。並不是Chrome根本無法讀取任何字體，而是它讀取一種字體並忽略其他字體，儘管它們都具有相同的語法。

來源

2013-07-22 Arash Barazandeh

Chrome始終使用woff。正如我在你的文章中看到的，你沒有加載woff。

無論如何，與woff鉻沒有得到渲染平滑效果，比你需要強制Chrome使用SVG。

解決您的問題，做到這一點：

1）進入this website，上傳您的TTF，讓您的字體的完整套件。 2）當您下載此套件時，此功能可以在Chrome上使用，但爲了獲得平滑效果的Fix，您需要進行一些更改以強制Chrome使用SVG字體。然後，去this webiste瞭解如何解決這個問題。就這樣。你應該得到這個工作沒有任何問題。如果您有疑問，請告訴我，我會幫助您！

當您轉到字體套件生成器時，您需要使用專家選項並選擇生成SVG字體。

下載包後，要強制chrome使用渲染效果，請在font-face css之後添加此css。事情是這樣的：

@media screen and (-webkit-min-device-pixel-ratio:0) { 
@font-face { 
    font-family: 'chunk-webfont'; 
    src: url('../../includes/fonts/chunk-webfont.svg') format('svg'); 
} 
}

讓你得到這個工作，我知道=）

來源

2013-07-22 22:54:15 FcbInfo

對不起，我的英文不好=/ – FcbInfo

我忘了說，渲染效果不適用於Windows。其他操作系統，如MAC或Linux，無需添加此CSS修復即可運行！ – FcbInfo

沒有工作。它有點讓情況變得更糟。我必須補充說，這些是波斯語字體，我的網頁是用波斯語寫的，如果有幫助的話。 –

可以這樣幫助ü：

@font-face { 
    font-family: 'dst'; 
    src: url('fonts/dastnevis.eot');/* IE9 Compat Modes */ 
    src: url('fonts/dastnevis.eot?#iefix'); /* IE6-IE8 */ 
    url('fonts/dastnevis.woff') format('woff'), /* Modern Browsers */ 
    src: local('☺'), url('fonts/dastnevis.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/dastnevis.svg') format('svg'); 
    font-weight: normal !important; 
    font-style: normal !important; 
}

來源

2013-07-23 07:55:38 jabbar

沒有幫助不幸。 –

Chrome瀏覽器沒有讀取我所有的@ font-faces

回答

相關問題