Web font in Chrome

Question

Chrome'da çok fazla değil, Firefox'ta harika görünen bir webfontum var. Daha az muhteşem sonuçlarla text-rendering mülküyle oynamaya çalıştım. Benim CSS böyle bir şeydir:

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

Firefox'ta bir şey yapmak görünmüyor text-rendering değiştirilmesi, bu yüzden bunun için tek bir ekran görüntüsü post ediyorum.

Sonuçlar:

• Firefox (nam-ı diğer "o nasıl görünmesi gerektiği")

  

• Krom - text-rendering: auto

  

• Krom - text-rendering: optimizeLegibility

  

• Krom - text-rendering: optimizeSpeed

  

• Krom - text-rendering: geometricPrecision

  

Tüm Chrome ekran görüntüleri Firefox'a göre çok kötü görünüyor. CSS'de eksik olduğum bir şey var mı?

Windows 7, Firefox 8.0 ve Chrome 15.0 kullanıyorum.

Answer 1

benim kodu almak CSS. Metin oluşturma motorları Firefox ve Chrome arasında farklıdır ve sonuçları görüyorsunuz. Yazı tipi uygun şekilde işaretlenmemiş ve bir web yazı tipi için hazırlanmamışsa, bu gibi sonuçların geliştirilmesini bekleyebilirsiniz.

Yazı tipi nereden alındı?

Ethan'ın sunduğu bazı otomatik işaretleme işlemlerinden herhangi birinin bunu normalize edip edemeyeceğini görmek için FontSquirrel'i çalıştırmayı deneyebilirsiniz.

Büyük farklılaştırıcılar olarak gördüğünüz, oluşturma ve DiretWrite hakkında bazı ek bilgiler .... http: //blogs.adobe.com/typblography/2010/11/microsoft-directwrite-is-coming.html

Answer 2

Bu benim benim her şeyi ve IE, Firefox üzerinde çalıştı nasıl Chrome

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

gerçekten bunu aracılığı iyileştirmek için yapabileceğim bir şey yok fontsquirrel

Answer 3

bu deneyin:

-webkit-text-stroke: .5px 

.5 keyfi bir tür - 0 ile 1 arasında bir piksel değeri anahtardır. Bu, yazı tipinin alt piksel ipuçlarını zorlar.

Bir demo

burada görülebilir: http://dabblet.com/gist/4154587

Answer 4

emin değil bu ne görüyorsanız, ancak Krom anti-aliasing ve TrueType yazı tipleri ile ilgili bir sorun varsa. http://www.fontspring.com/blog/smoother-web-font-rendering-chrome başı olarak, yerine font-face de TrueType, ör .:

@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'); 
} 

büyük dezavantajı Safari svg ve woff hem indirir olmasıdır önce SVG yazı tipi belirtebilirsiniz.

Answer 5

Chrome, Chrome 37'de yayınlandı ve Windows Grafik Aygıtı arayüzünden, yazı tiplerinin modern ekranlarda görünme biçimini geliştiren Microsoft DirectWrite API'ye geçecek.

Beta şimdi çıktı: google itibaren https://www.google.com/chrome/browser/beta.html

: http://blog.chromium.org/2014/07/chrome-37-beta-directwrite-on-windows.html