Phông chữ web trong Chrome

Question

Tôi có một webfont trông tuyệt vời trên Firefox, không nhiều trên Chrome. Tôi đã thử chơi với thuộc tính text-rendering, với kết quả ít hơn ngoạn mục. CSS của tôi là một cái gì đó như thế này:

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

Thay đổi text-rendering dường như không làm bất cứ điều gì trong Firefox, vì vậy tôi đăng một ảnh chụp màn hình duy nhất cho nó.

Kết quả:

• Firefox (còn gọi là "những gì nó sẽ giống như thế")

  

• Chrome - text-rendering: auto

  

• Chrome - text-rendering: optimizeLegibility

  

• Chrome - text-rendering: optimizeSpeed

  

• Chrome - text-rendering: geometricPrecision

  

Tất cả ảnh chụp màn hình của Chrome trông thực sự kém so với ảnh chụp màn hình của Firefox. Có điều gì tôi thiếu trong CSS không?

Tôi đang sử dụng Windows 7, Firefox 8.0 và Chrome 15.0.

Answer 1

Có thực sự không phải là bất cứ điều gì bạn có thể làm để cải thiện thông qua này CSS. Các công cụ hiển thị văn bản khác nhau giữa Firefox và Chrome và bạn đang thấy kết quả. Nếu phông chữ không được gợi ý và chuẩn bị đúng cho phông chữ web, bạn có thể mong đợi các kết quả như thế này được nâng cao.

Phông chữ được lấy từ đâu?

Bạn có thể thử chạy nó thông qua FontSquirrel để xem có bất kỳ gợi ý tự động nào mà Ethan cung cấp có thể bình thường hóa điều này một chút hay không.

Một số thông tin bổ sung về hiển thị và DiretWrite là những gì bạn đang xem là những điểm khác biệt lớn .... http: //blogs.adobe.com/typblography/2010/11/microsoft-directwrite-is-coming.html

Answer 2

Đây là cách tôi làm tất cả của tôi và nó làm việc trên IE, Firefox, 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; 
} 

tôi nhận được mã của tôi từ fontsquirrel

Answer 3

Hãy thử điều này:

-webkit-text-stroke: .5px 

Các.5 là loại tùy ý - một số giá trị pixel giữa 0 và 1 là khóa. Điều này buộc ám chỉ pixel phụ của phông chữ.

Một bản demo có thể được nhìn thấy ở đây: http://dabblet.com/gist/4154587

Answer 4

Không chắc nếu đây là những gì bạn nhìn thấy, nhưng Chrome có một vấn đề với anti-aliasing và truetype font chữ. Theo http://www.fontspring.com/blog/smoother-web-font-rendering-chrome, bạn thay vì có thể chỉ định phông chữ SVG trước TrueType trong font-face của bạn, ví dụ .:

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

Nhược điểm lớn nhất là Safari sẽ tải cả svg và WOFF.

Answer 5

Chrome đã phát hành trong Chrome 37, chúng sẽ chuyển từ giao diện Thiết bị đồ họa Windows sang API DirectWrite của Microsoft, một công nghệ cải thiện cách phông chữ nhìn trên màn hình hiện đại.

Beta là bây giờ ra: https://www.google.com/chrome/browser/beta.html

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