2013-04-16 28 views
8

Đây là vấn đề chung và có vẻ như có giải pháp. Vấn đề là phông chữ trên web cho thấy sự lộn xộn trong chrome. Giải pháp nên là di chuyển cuộc gọi .svg trước cuộc gọi .woff. Giải thích ở đây: http://www.fontspring.com/blog/smoother-web-font-rendering-chrome và ở đây: http://www.adtrak.co.uk/blog/font-face-chrome-rendering/Phông chữ web của Google trông có vẻ lộn xộn trong Chrome - cách áp dụng sửa lỗi

Vấn đề là, mà tôi đang sử dụng phông chữ web google, và nhập khẩu các phông chữ như thế này:

<link href='http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic' rel='stylesheet' type='text/css'> 

Và tôi không biết, và không thể tìm ra, làm thế nào để nhập nó bằng thẻ css @font-face thay vì ở trên. Tôi đã thử, nhưng đã bị mắc kẹt kể từ khi google chỉ cung cấp các phông chữ trong ttf và không svg hoặc woff.

Hy vọng bạn có thể trợ giúp.

Trả lời

2

Bạn sẽ phải tự lưu trữ phông chữ nếu bạn muốn áp dụng sửa lỗi này.

Liên kết Google Fonts của bạn là một yêu cầu cho biểu định kiểu được tạo động dựa trên các thông số bạn cung cấp - và trên phát hiện trình duyệt. Ví dụ liên kết của bạn:

<link href='http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic' rel='stylesheet' type='text/css'> 

Nếu bạn thực sự thực hiện yêu cầu mình sử dụng curl:

$ curl http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic 

đây là những gì được gửi lại:

@font-face { 
    font-family: 'Asap'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Asap'), local('Asap-Regular'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/-KZsao_xwBpcExaHoPH8_w.ttf) format('truetype'); 
} 
@font-face { 
    font-family: 'Asap'; 
    font-style: normal; 
    font-weight: 700; 
    src: local('Asap Bold'), local('Asap-Bold'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/5DVGWnz9Skaq1amwwwGZEw.ttf) format('truetype'); 
} 
@font-face { 
    font-family: 'Asap'; 
    font-style: italic; 
    font-weight: 400; 
    src: local('Asap Italic'), local('Asap-Italic'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/8YIp-EIJXA6NJdTPxy9qiQ.ttf) format('truetype'); 
} 
@font-face { 
    font-family: 'Asap'; 
    font-style: italic; 
    font-weight: 700; 
    src: local('Asap Bold Italic'), local('Asap-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/_sVKdO-TLWvaH-ptGimJBaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype'); 
} 

Điều đơn giản nhất để làm là quay lại Phông chữ web của Google, tải xuống phông chữ được đề cập bằng cách đi here và nhấp vào mũi tên tải xuống.

Sau đó, bạn có thể sử dụng suggested fix from here, tham khảo các tập tin phông chữ bạn đã tải về:

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

Cảm ơn rất nhiều vì câu trả lời của bạn! Tôi đã không sử dụng nó trong một thời gian, và "gần như" khiến nó hoạt động. Vấn đề là, với phương pháp phông chữ tự lưu trữ mới, tất cả các trình duyệt dường như hiển thị phông chữ khác với liên kết yêu cầu biểu định kiểu google gốc. Firefox và IE hiển thị nó lớn hơn một chút và nhiều chất béo/đậm hơn, và Chrome dường như làm cho nó tốt hơn một chút, nhưng cũng không hoàn toàn đúng. Vui lòng tham khảo hình ảnh ví dụ bên dưới. ! Http: //www.gadaffi.dk/example.jpg Bất kỳ ý tưởng nào? :/ – Farsen

+0

Như tôi đã đề cập, Google webfonts sử dụng trình duyệt để phát hiện - do đó, nó sẽ gửi lại một cái gì đó hơi khác nhau, phù hợp với trình duyệt của người dùng đang đưa ra yêu cầu. Không có giải pháp hoàn hảo cho việc này. Lời khuyên của tôi sẽ là để nói chung ngừng nhắm tới điểm ảnh cho phù hợp với trình duyệt chéo hoàn hảo - nó không phải làm việc theo cách đó. –

+0

Dường như vì đây là sự cố Windows/Chrome, họ có thể khắc phục sự cố DirectWrite với trình duyệt hoặc như đã đề cập ở trên, hãy sửa lệnh svg trên phông chữ google apis. Dù bằng cách nào, tôi trông giống như nó thông qua thông qua một chipper gỗ trên windows 8 + chrome. – Mark

0

Bạn đã làm một thiết lập lại thích hợp của tất cả các phong cách?

Trải nghiệm hiển thị không nhất quán của bạn có thể do trình duyệt mặc định.

Cài đặt lại.css đặt tất cả các thành phần trở lại giá trị mặc định, cách này không đồng nhất giữa các trình duyệt bị giảm. Có nhiều ví dụ cho tệp reset.css, một trong những phổ biến nhất là meyerweb reset css. Một cách khác để giảm mâu thuẫn là sử dụng normalize.css.

Sự khác biệt giữa hai cách tiếp cận ngắn gọn là, reset.css chỉ đặt lại tất cả các kiểu trình duyệt cụ thể trong khi normalize.css có phạm vi rộng hơn bằng cách tạo mặc định trình duyệt chéo.

Sự khác biệt giữa cả hai được giải thích here bởi nhà phát triển của normalize.css.

Nếu tất cả các liên kết đó không giúp đảm bảo rằng bạn đặt trọng số phông chữ luôn đúng, hãy nhập tất cả các trọng số phông cần thiết.

Bạn có thể đọc về trọng số phông chữ tại đây: http://css-tricks.com/watch-your-font-weight/ Bạn cũng nên áp dụng kỹ thuật này khi bạn sử dụng normalize.ccs vì nó không đặt lại phông chữ như rest.css.

-1

Thêm mã này vào biểu định kiểu của bạn cho từng phần tử.

opacity: .99; 

Ví dụ -

p, li { 
    opacity: .99; 
} 

Tôi không có ý tưởng tại sao điều này hoạt động nhưng nó đã làm.

Các vấn đề liên quan