Ưu tiên phông chữ SVG bằng Phông chữ web của Google

Question

hiển thị phông chữ trong Google Chrome trên cửa sổ thật khủng khiếp trừ khi bạn sử dụng phông chữ SVG. Tuy nhiên phông chữ web google ưu tiên các tệp WOFF.

Có cách nào để buộc nó phân phối phông chữ SVG hoặc tôi có phải tự lưu trữ phông chữ không?

Answer 1

Bạn cần lưu trữ các tệp như sử dụng phương thức @import hoặc <link> tham chiếu tệp CSS chỉ gọi tệp WOFF (do phát hiện trình duyệt). Ví dụ http://fonts.googleapis.com/css?family=Open+Sans:

@font-face { 
    font-family: 'Open Sans'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Open Sans'), local('OpenSans'), url('http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff') format('woff'); 
} 

Khi bạn lưu trữ các tập tin địa phương, bạn có thể sau đó di chuyển các cuộc gọi SVG lên trong ngăn xếp ưu tiên nó. Bạn có thể xem ví dụ tại đây: http://www.fontspring.com/blog/smoother-web-font-rendering-chrome

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