Chrome中的Web字體

我有一個在Firefox上看起來很棒的webfont，而不是Chrome上的那麼多。我試過玩text-rendering屬性，結果不甚理想。我的CSS是這樣的：Chrome中的Web字體

@font-face { 
    font-family: 'TextFont'; 
    src: url('[my font file url]') format('truetype'); 
    font-weight: normal; 
    font-style: normal; 
} 
body { 
    font-family: TextFont, Tahoma, Geneva, sans-serif; 
    text-rendering: auto; 
}

更改text-rendering似乎並沒有在Firefox中做任何事情，所以我發佈一個單一的截圖吧。

結果：

火狐（又名「它應該是什麼樣子」）
鉻 - text-rendering: auto
鉻 - text-rendering: optimizeLegibility
鉻 - text-rendering: optimizeSpeed
鉻 - text-rendering: geometricPrecision

與Firefox相比，所有Chrome屏幕截圖看起來都很糟糕。 有什麼我在CSS中失蹤？

我使用的是Windows 7，Firefox 8.0和Chrome 15.0。

來源

2011-12-15 cambraca

Chrome是在Windows上渲染字體慘不忍睹，這是或多或少不固定的問題（除非谷歌決定使用ClearType）。這就是爲什麼你應該切換到Linux;） – Blender 2011-12-15 00:28:30

我沒有切換到Linux的問題，但我需要它到處看起來很好 – cambraca 2011-12-15 00:45:10

我對Linux很諷刺，但我從來沒有在Chrome上使用自定義字體的好運氣。 – Blender 2011-12-15 01:39:04

真的是沒有什麼可以做，以改善這種通過CSS。 Firefox和Chrome上的文本渲染引擎是不同的，你會看到結果。如果字體沒有正確提示併爲Web字體做好準備，則可以期望像這樣的結果得到增強。

從哪裏獲取字體？

你可以嘗試在FontSquirrel中運行它，看看Ethan提供的任何自動暗示是否可以使這一點正常化。

有關渲染和DiretWrite的一些額外信息，這就是您所看到的作爲最大的區別... http：//blogs.adobe.com/typblography/2010/11/microsoft-directwrite-is-coming.html

來源

2011-12-15 00:45:34

這是我做的所有地雷和它在IE，Firefox的工作，鉻

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

} 
body{ 
font: 12px 'NeutraTextBold', sans-serif; 
color: #FFF; 
}

讓我的代碼fontsquirrel

來源

2011-12-15 00:32:01 Andres

試試這個：

-webkit-text-stroke: .5px

的。5是一種隨意的 - 0到1之間的一些像素值是關鍵。這會強制字體的子像素提示。

的演示可以在這裏看到： http://dabblet.com/gist/4154587

來源

2013-01-24 10:12:04 Barney

不知道這是否是你所看到的，而Chrome與抗鋸齒和TrueType字體的問題。按照http://www.fontspring.com/blog/smoother-web-font-rendering-chrome，可以改爲在你的字體面的TrueType字體，例如：

@font-face { 
font-family: 'MyWebFont'; 
src: url('webfont.eot'); 
src: url('webfont.eot?#iefix') format('embedded-opentype'), 
    url('webfont.svg#svgFontName') format('svg'), 
    url('webfont.woff') format('woff'), 
    url('webfont.ttf') format('truetype'); 
}

最大的缺點是，Safari會同時下載SVG和WOFF之前指定SVG字體。

來源

2013-03-27 16:32:08 Nils