字體不是在瀏覽器

我想在我的網站上使用自定義字體並在CSS我有以下代碼統一渲染：字體不是在瀏覽器

@font-face { 
    font-family: 'Sketch'; 
    src: url('../fonts/Sketch.eot'); 
    src: url('../fonts/Sketch.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: normal; 
} 
ul#holder {font-family:'Sketch'}

的字體不出現，因爲他們必須在Firefox。在Chrome中，字體似乎並不順利渲染和不出現在Firefox一樣好（我應該放棄我的側邊欄使用的字體的想法，並使用圖像是否顯示流暢的文字代替; - ？/）

在IE中，字體根本沒有出現。應該做些什麼才能在Chrome中正確平滑這些字體，並讓這些字體在IE中運行？

來源

2012-08-11 user1240679

即使你設法導入爲每個瀏覽器提供正確的字體格式，你永遠無法獲得完全相同的渲染，所以你最好習慣它+你無法控制用戶的字體設置。無論如何，它仍然比使用圖片更好。 – darma 2012-08-11 14:05:25

如果您使用URL重寫或放置在不同的sundomain的字體，字體類型的完整URL，並檢查是否跨域訪問允許「*」，我Reghards :)兼容性圖表上 – Mhmd 2012-08-11 14:08:08

不同的瀏覽器支持不同的字體格式：

Font formats

因此，你需要在所有格式創建您的字體。你可以使用Font Squirrel（謝謝你，effectica）。

然後，可將它們導入這樣的：

@font-face { 
    font-family: 'Comfortaa Regular'; 
    src: url('Comfortaa.eot'); 
    src: local('Comfortaa Regular'), 
     local('Comfortaa'), 
     url('Comfortaa.ttf') format('truetype'), 
     url('Comfortaa.svg#font') format('svg'); 
}

這不是唯一可能的方式。你可以在Paul Irish的博客上找到關於這個問題的more complete information。

而且，無論如何，它們的外觀在不同的瀏覽器中會有所不同。

來源

2012-08-11 14:02:31

+1。但是，我可能會建議查看[Paul Irish的文章]（http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/），瞭解不同的@ font-face語法的優缺點和最簡潔的內容選項。 – 2012-08-11 14:13:25

@pk_nb，謝謝，我已將您的鏈接添加到我的答案！ – 2012-08-11 14:16:16

@EdwardRuchevits：謝謝。我用fontsquirrel以各種格式下載字體。 Firefox和IE現在都能正常工作，但是Chrome瀏覽器仍然看起來很爛並且參差不齊。 :-( – user1240679 2012-08-12 06:11:15

以下是創建嵌入字體包一個偉大的網址：

http://fontface.codeandmore.com/

上傳TTF或OTF字體，它爲您的整個字體套件，完整的實現HTML和CSS的例子。

乾杯！

來源

2012-08-11 14:05:23 Cynthia

）如果你打算使用一個字體包，我實際上會推薦[Font Squirrel]（http://www.fontsquirrel.com/fontface/generator），因爲你對這個套件有很多控制權，它們提供許多預先製作者以及 – 2012-08-11 14:09:32

字體松鼠是好的，但也有一些字體，他們不會爲使包的（我遇到這個瓦特/黑體字體系列，等...）。鏈接@ codeandmore .COM沒有讓我失望過。 – Cynthia 2012-08-11 15:16:17

愛德華說過這一切。 Chrome曾經讓我瘋狂，因爲它顯示某些字體。

如果你有字體文件，你可以使用font squirrel生成代碼，以及你需要的所有瀏覽器所有的字體文件。

來源

2012-08-11 14:09:50 effectica

謝謝。我用fontsquirrel下載字體中的所有格式。Firefox和IE正在細兩種工作，但鉻一個看起來還是蘇茨基和鋸齒狀。:-( – user1240679 2012-08-12 06:12:37

所有主流瀏覽器都略有不同的字體渲染引擎/技術，他們有不同的品質的渲染輸出。所以你的字體在各種瀏覽器之間不太可能是「像素完美」，並且會出現一些質量差異。哪一個最終取決於字體。我有一個在Chrome和IE上看起來很不錯的字形字體，但在Firefox中看起來有點washed ... ......

無論如何，有一點小技巧你可以幫助你獲得在IE上工作的字體，請參閱第二個src線。這是必要的，因爲雖然添加額外的字體格式確保支持每個瀏覽器，但不幸的是，它在IE9之前的IE版本中導致問題。那些較舊的瀏覽器會將第一個url（'和最後一個'）之間的所有內容視爲單個URL請求，因此無法加載字體。這個黑客技巧的瀏覽器以爲src屬性的其餘部分是查詢字符串的參數，所以它去尋找正確的URL和加載字體：

@font-face { 
    font-family: 'Sketch'; 
    src: url('../fonts/SketchRockwell.eot'); 
    src: url('../fonts/SketchRockwell.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/SketchRockwell.woff') format('woff'), 
     url('../fonts/SketchRockwell.ttf') format('truetype'), 
     url('../fonts/SketchRockwell.svg#countersoftfontRegular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
}

以上從字體松鼠的@字體 - 來了可以在http://www.fontsquirrel.com/fontface/generator訪問面向套件生成器。您可以上傳字體並將其轉換爲您希望的任何格式。您還可以控制它輸出的CSS語法，字符子集以減小文件大小，並使用更多選項來微調字體。

此外，如果您要在文本上使用粗體或斜體，則需要包含該規則的版本相應地改變了每種組合的font-weight和font-style，所以當瀏覽器遇到一個帶有粗體的CSS規則時就知道使用哪種字體。

每種字體通常具有的設計目的和特定作業的創建。大多數商業字體的設計都不適合在屏幕上以小尺寸進行查看，因此在很多情況下，爲標題預留這些@ font-face並繼續使用網絡安全字體（如Georgia和Lucida）進行正文複製是最有意義的。

會影響易讀性字體的另一個方面是，他們是如何消除鋸齒和暗示。現在，網頁字體的邊緣通常比傳統字體更加鋸齒，即使是反鋸齒，通常是因爲大多數並不是在屏幕上查看的。更高質量的字體，以及字體設計的網頁說，有更好的提示，

來源

2012-08-11 14:16:08

謝謝。我二手fontsquirrel下載字體中的所有格式。Firefox和IE都現在的工作很好，但鉻一個看起來還是蘇茨基和鋸齒狀。:-( – user1240679 2012-08-12 06:11:48

你可以試着考慮看看抗鋸齒附加在鍍鉻這可能會讓你感覺更好，但當然它不會幫助其他人https://chrome.google.com/webstore/detail/bjckmidhcpdmhhkoeeiljpjbmdpdeeam – 2012-08-12 06:57:17

-1

爲Firefox素描羅克韋爾字體錯誤完美的解決方案是使用CSS樣式：

font-weight:normal !important;

來源

2015-03-25 08:09:06

字體不是在瀏覽器

回答

相關問題