@ vấn đề hiển thị phông chữ trong Chrome cho PC

Question

Tôi đã sử dụng phông chữ để nhúng phông chữ vào trang web (với Áp dụng gợi ý đã chọn) và không hiển thị đúng trong Chrome v15.0 dành cho PC. Phông chữ cho thấy, nhưng kém. Tôi chắc chắn rằng font-sóc đã cho tôi mã đúng, vì vậy tôi cho rằng có một xung đột trong CSS của tôi. Cảm ơn trước sự giúp đỡ của bạn.

Link to site

@font-face { 
    font-family: 'RockwellStd-Light'; 
    src: url('rockwellstdlight-webfont.eot'); 
    src: url('rockwellstdlight-webfont.eot?#iefix') format('embedded-opentype'), 
     url('rockwellstdlight-webfont.woff') format('woff'), 
     url('rockwellstdlight-webfont.ttf') format('truetype'), 
     url('rockwellstdlight-webfont.svg#RockwellStdLight') format('svg'); 
    font-weight: lighter; 
    font-style: normal; 

} 

h1 { 
    font-family:'RockwellStd-Light', Helvetica, Ariel; 
    font-size:34px; 
    color:#407d3b; 
    font-weight:lighter; 
    margin-left:20px; 

} 

h2 { 
    font-family:'RockwellStd-Light', Helvetica, Ariel; 
    font-size:32px; 
    color:#ece1af; 
    font-weight:lighter; 
    line-height:42px; 

} 

h3 { 
    font-family:'RockwellStd-Light', Helvetica, Ariel; 
    font-size:20px; 
    color:#FFF; 
    font-weight:lighter; 

} 

p { 
    font-family:'RockwellStd-Light', Helvetica, Ariel; 
    font-size:14px; 
    line-height:17px; 
    color:#333; 
    text-align:justify; 

} 

.criteria_table { 
    font-family:'RockwellStd-Light', Helvetica, Ariel; 
    font-size:14px; 
    color:#FFF; 

} 

Answer 1

Bạn có thể chỉ định text-shadow:

text-shadow: 0 0 1px rgba(0, 0, 0, .01); 

Khi sử dụng phông chữ tùy chỉnh, để làm cho họ làm tốt hơn trong google chrome. Nó buộc Chrome sử dụng đường dẫn hiển thị thay thế. Xin lưu ý rằng điều này sẽ làm tăng tải CPU trên máy người dùng cuối.

Answer 2

Tôi guyes xin lỗi, nhưng điều này không có tác dụng nữa trong Chrome 16.

tương tự đề là ở đây: @font-face anti-aliasing on windows and mac

Và tôi đã viết về nó trên Diễn đàn Google Chrome ở đây, chờ đợi phản ứng hiện nay : http://www.google.com/support/forum/p/Chrome/thread?tid=43f549bc2a960a12&hl=en

Answer 3

https://stackoverflow.com/a/9041280/1112665

Đối @ font-face giao phông chữ, sửa chữa là để đặt các tập tin svg ngay dưới .eot nhưng trên .woff và .ttf

Từ này:

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

Để này:

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

Ví dụ về các sửa chữa này có thể được nhìn thấy ở đây:

FontSpring Examples
Adtrak Examples

Answer 4

Như hisnameisjimmy đã chỉ ra, giải pháp là sử dụng phông chữ SVG, mà luôn trả lại với anti-aliasing, nhưng điều này cũng có một số nhược điểm:

• phông chữ SVG không chứa bất kỳ thông tin gợi ý, vì vậy các chữ cái render không được sắc nét như chúng có thể trên một hệ thống đã bật tính năng vuốt phông chữ.
• Không thể thay đổi trọng lượng và kiểu phông chữ SVG, do đó việc sử dụng font-weight:bold; hoặc font-style:italic; không có hiệu lực.

Tuy nhiên, ít nhất vấn đề đầu tiên có thể được giải quyết bằng cách sử dụng phông chữ SVG chỉ khi vuốt phông chữ thực sự bị tắt. Có một số post at User Agent Man tốt đẹp về cách phát hiện font-smooting, mà tôi đã sử dụng để tạo một kịch bản nhỏ (~ 600 byte), tự động cập nhật CSS phông chữ của bạn nếu làm mịn phông chữ bị tắt.

Bạn có thể tìm my Font Smoothie script at GitHub'S GIST và tất cả các bạn phải làm là thêm dòng sau bất cứ nơi nào trong trang của bạn:

<script src="fontsmoothie.min.js" type="text/javascript"></script> 

Tuy nhiên, bạn cũng cần một phông chữ cũng hinted để có được glyphs nhìn đẹp. May mắn thay, có một cách để thêm một số gợi ý được tạo tự động vào phông chữ ttf bằng cách sử dụng ttfautohint và sau đó bạn có thể sử dụng Font Squirrel để tạo phông chữ web. Toàn bộ quá trình là một chút khó khăn vì vậy tôi đã viết an article on how to create web-fonts on Pixels|Bytes, trong đó giải thích làm thế nào để thêm gợi ý cho một phông chữ và làm thế nào để sử dụng kịch bản Font Smoothie của tôi. Hy vọng điều này sẽ giúp :)

PS: Tôi biết rằng liên kết tới blog của riêng tôi sẽ không được đánh giá cao ở đây, nhưng tôi nghĩ bài đăng của tôi mô tả giải pháp tốt cho vấn đề, vì vậy tôi đã đăng nó. Vui lòng để lại nhận xét nếu bạn muốn tôi xóa liên kết và tôi sẽ làm như vậy.