Phông chữ CSS của Google - Chữ nghiêng được kéo dài trong IE

Question

Tôi có câu hỏi về Phông chữ của Google. Tôi đang sử dụng phông chữ "Lato" từ Google Fonts và có vẻ như hoạt động hoàn hảo trong Firefox, Chrome, IE9 nhưng trong IE 7 và 8, phiên bản nghiêng trông thực sự kéo dài.

Tôi không làm bất cứ điều gì quá điên chỉ sử dụng

font-style:italic; font-weight:700; 

và bao gồm cả phông chữ sử dụng:

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

Đây có phải là một vấn đề được biết đến với Google Fonts hoặc là nó một cái gì đó tôi đang làm sai?

Cảm ơn!

Answer 1

Vì lý do gì đó (có thể ai đó có thể giúp giải thích tại sao), Google đã quyết định không phân phối bất kỳ biến thể phông chữ nào khác với biến thể thường dùng cho người dùng IE. Hành vi này dường như được kiểm soát bởi tác nhân người dùng - nếu bạn tải url CSS (trong trường hợp của bạn http://fonts.googleapis.com/css?family=Lato:400,700,700italic,900italic) trong Firefox so với IE, bạn sẽ thấy rằng chỉ một khối @font-face được trả lại cho IE.

Vì vậy, cách dễ nhất để tải nó là tải url đó trong Firefox và sao chép/dán CSS vào tệp css của riêng bạn, thay vì phục vụ trực tiếp từ Google. Bây giờ IE sẽ có quyền truy cập vào tất cả các biến thể phông chữ ... nhưng về mặt kỹ thuật, bạn đang phá vỡ liên kết giữa tệp CSS và tệp phông cơ bản, mà nên không bao giờ thay đổi nhưng hoàn toàn tùy theo quyết định của Google.

Điều không may là (có thể là một phần trong lý do của chúng), IE không hiển thị phông chữ đặc biệt tốt ngay cả khi đó. Trong thử nghiệm của tôi, trọng lượng bán gấp cho thấy táo bạo hơn nó nên và nghiêng dường như khoảng cách quá xa nhau. Nó vẫn trông dễ chịu hơn so với phông chữ xiên giả IE trình bày mà không có các biến thể phụ, ít nhất.

chỉnh sửa: Sau khi tìm hiểu thêm, tôi đã tìm thấy trang tuyệt vời on Typekit giải quyết vấn đề một cách toàn diện. Về cơ bản, IE rất hạn chế khi nói đến các họ phông chữ tùy chỉnh - cách duy nhất bạn có thể đạt được thành công với IE là xác định các biến thể của bạn thành các họ phông riêng biệt trong IE, và sau đó sử dụng các phông chữ khác nhau bạn sẽ sử dụng font-weight và font-style trong các trình duyệt khác. Điều này sẽ cung cấp cho bạn khả năng tương thích phổ quát.

edit2: Hóa ra các url cho phông chữ của IE khác với các trình duyệt khác (IE sử dụng định dạng eot thay vì woff). Một quá trình đầy đủ về cách làm việc này cho phông chữ của bạn sẽ như sau:

• mở http://fonts.googleapis.com/css?family=Lato:400,700,700italic,900italic trong firefox/chrome/etc và copy css vào một tập tin mới, hoặc vào stylesheet ie-duy nhất của bạn.
• Đi qua và đưa ra tất cả các định nghĩa src 'cục bộ' và 'định dạng', chỉ cho bạn các phần 'url'.
• Đối với mỗi biến thể được chỉ định trong url kiểu phông chữ của bạn (trong ví dụ của bạn, chúng sẽ là 400, 700, 700italic và 900italic), tải biểu định kiểu phông trong IE với biến thể này chỉ và mở CSS kết quả trong trình chỉnh sửa văn bản . Ví dụ: tải http://fonts.googleapis.com/css?family=Lato:900italic để nhận biến thể in nghiêng tuyệt vời.
• Tìm biến thể phù hợp trong biểu định kiểu mới của bạn (các thuộc tính font-style và font-weight phải khớp) và thay thế url woff src bằng địa chỉ eot cho IE. Ngoài ra cung cấp cho phông chữ một gia đình khác nhau - Tôi khuyên bạn nên suffixing với phong cách và trọng lượng như Typekit làm, để Mở Sans trở thành Mở Sans i9 và cứ tiếp tục như vậy.
• Thực hiện việc này cho tất cả các biến thể còn lại.
• Có điều kiện bao gồm biểu định kiểu mới này thay cho biểu định kiểu bạn đang sử dụng cho các trình duyệt khác.
• Bất cứ nơi nào bạn đã sử dụng font-style hoặc font-weight trong css của bạn, hãy thêm một số font-family, tham chiếu tên gia đình mới AND tên gia đình chính xác như được các trình duyệt khác nhìn thấy. Ví dụ: font-family: 'Open Sans i9', 'Open Sans'; font-weight: 900; font-style: italic;. Điều này sẽ sử dụng tên họ phông chữ cho khả năng tương thích của IE và các biến thể + gia đình cơ bản trong các trình duyệt khác.

Answer 2

Hai mẫu không hiển thị cùng một phông chữ in nghiêng. Tôi đoán IE7/8 được in nghiêng giả tạo. Tôi đoán thêm rằng điều này là do trọng lượng phông chữ không khớp với trọng số thực sự trong tệp phông chữ; hãy thử sử dụng trọng lượng 500 thay thế.

Answer 3

Đó là một câu hỏi cũ, nhưng tôi đã googling trong một giờ để tìm cách giải quyết dễ dàng cho các chữ in đậm giả và giả này trong IE8. đây là những gì đã làm việc cho tôi: Thay vì tải tất cả các phông chữ cùng một lúc tôi tải từng cái một. Tôi thích phương pháp @import trong tệp css để nó giống như sau:

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic); 
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic); 
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400); 
@import url(http://fonts.googleapis.com/css?family=Open+Sans:600);