Tôi đang sử dụng google webfont và chúng ổn ở kích thước phông chữ siêu lớn, nhưng ở 18px, chúng trông thật tệ. Tôi đã đọc ở đây và có những giải pháp để làm mịn phông chữ, nhưng tôi không tìm thấy nơi nào giải thích rõ ràng và một vài đoạn tôi đã tìm thấy hoàn toàn không hoạt động.

Tôi h4trông thật tệ trong hầu hết mọi trình duyệt, nhưng Chrome là thứ tồi tệ nhất. Trong Chrome, khá nhiều phông chữ của tôi trông rất tệ.

ai đó có thể chỉ cho tôi phương hướng đúng không? Có lẽ bạn biết về một tài nguyên giải thích điều này rõ ràng? Cảm ơn!

VÍ DỤ SCREENSHOT # 1

Ảnh chụp màn hình này hiển thị trang chủ của https://www.dartlang.org/ , ngôn ngữ lập trình được tạo bởi Google (vì vậy chúng tôi có thể ngụ ý rằng trang web này cũng được Google xây dựng) và sử dụng Google Webfonts.

Ảnh chụp màn hình hiển thị Google Chrome ở bên trái, Firefox / Internet Explorer ở bên phải.:

VÍ DỤ SCREENSHOT # 2

Ảnh chụp màn hình này hiển thị trang thông tin sản phẩm trên Adobe.com, sử dụng webfont do Typekit cung cấp. Adobe & Typekit là các chuyên gia khi nói đến phông chữ.

Ảnh chụp màn hình hiển thị Google Chrome ở bên phải, Firefox / Internet Explorer ở bên trái:

Tình trạng sự cố, tháng 6 năm 2014: Đã sửa lỗi với Chrome 37

Cuối cùng, nhóm Chrome sẽ phát hành bản sửa lỗi cho vấn đề này với Chrome 37 sẽ được phát hành ra công chúng vào tháng 7 năm 2014. Xem ví dụ so sánh Chrome 35 ổn định hiện tại và Chrome 37 mới nhất (xem trước phát triển sớm) tại đây:

Tình trạng của vấn đề, tháng 12 năm 2013

1.) Có NO giải pháp thích hợp khi tải phông chữ qua @import, <link href=hay Google webfont.js. Vấn đề là Chrome chỉ yêu cầu các tệp .woff từ API của Google sẽ hiển thị khủng khiếp. Đáng ngạc nhiên là tất cả các loại tập tin phông chữ khác hiển thị đẹp. Tuy nhiên, có một số thủ thuật CSS sẽ "làm mịn" phông chữ được hiển thị một chút, bạn sẽ tìm thấy cách giải quyết sâu hơn trong câu trả lời này.

2.) Có một giải pháp thực sự cho vấn đề này khi tự lưu trữ các phông chữ, lần đầu tiên được đăng bởi Jaime Fernandez trong một câu trả lời khác trên trang Stackoverflow này, khắc phục vấn đề này bằng cách tải phông chữ web theo thứ tự đặc biệt. Tôi sẽ cảm thấy tồi tệ khi chỉ đơn giản là sao chép câu trả lời tuyệt vời của anh ấy, vì vậy xin vui lòng xem ở đó. Ngoài ra còn có một giải pháp (chưa được chứng minh) khuyến nghị chỉ sử dụng phông chữ TTF / OTF vì chúng hiện được hỗ trợ bởi hầu hết các trình duyệt.

3.) Nhóm nhà phát triển Google Chrome hoạt động về vấn đề đó. Vì đã có một vài thay đổi lớn trong công cụ kết xuất, rõ ràng có điều gì đó đang diễn ra.

Tôi đã viết một bài đăng blog lớn về vấn đề đó, xin vui lòng xem: Cách khắc phục kết xuất phông chữ xấu xí trong Google Chrome

Ví dụ sinh sản

Xem ví dụ từ câu hỏi ban đầu trông như thế nào hôm nay, trong Chrome 29:

VÍ DỤ TÍCH CỰC:

Trái: Firefox 23, phải: Chrome 29

VÍ DỤ TÍCH CỰC:

Hàng đầu: Firefox 23, dưới cùng: Chrome 29

VÍ DỤ NEGECT: Chrome 30

VÍ DỤ NEGECT: Chrome 29

Giải pháp

Sửa ảnh chụp màn hình ở trên bằng -webkit-text-Stro:

Hàng đầu tiên là mặc định, thứ hai có:

-webkit-text-stroke: 0.3px;

Hàng thứ ba có:

-webkit-text-stroke: 0.6px;

Vì vậy, cách để sửa các phông chữ đó chỉ đơn giản là cung cấp cho chúng

-webkit-text-stroke: 0.Xpx;

hoặc cú pháp RGBa (bởi nezroy, được tìm thấy trong các bình luận! Cảm ơn!)

-webkit-text-stroke: 1px rgba(0,0,0,0.1)

Ngoài ra còn có một khả năng lỗi thời : Cung cấp cho văn bản một bóng đơn giản (giả):

text-shadow: #fff 0px 1px 1px;

Giải pháp RGBa (được tìm thấy trong blog của Jasper Espejo):

text-shadow: 0 0 1px rgba(51,51,51,0.2);

Tôi đã viết một bài blog về điều này:

Nếu bạn muốn được cập nhật về vấn đề này, hãy xem bài đăng trên blog: Cách khắc phục kết xuất phông chữ xấu xí trong Google Chrome . Tôi sẽ đăng tin nếu có tin tức về điều này.

Câu trả lời ban đầu của tôi:

Đây là một lỗi lớn trong Google Chrome và Nhóm Google Chrome biết về điều này, xem báo cáo lỗi chính thức tại đây . Hiện tại, vào tháng 5 năm 2013, thậm chí 11 tháng sau khi lỗi được báo cáo, nó vẫn chưa được giải quyết. Một điều kỳ lạ là trình duyệt duy nhất làm rối tung Google Webfonts là trình duyệt Chrome của riêng Google (!). Nhưng có một cách giải quyết đơn giản sẽ khắc phục vấn đề, vui lòng xem bên dưới để biết giải pháp.

TUYÊN BỐ TỪ NHÓM PHÁT TRIỂN CHROME GOOGLE, tháng 5 năm 2013

Tuyên bố chính thức trong các bình luận báo cáo lỗi:

Kết xuất phông chữ Windows của chúng tôi đang tích cực làm việc. ... Chúng tôi hy vọng sẽ có một cái gì đó trong một hoặc hai cột mốc mà các nhà phát triển có thể bắt đầu chơi. Làm thế nào nhanh đến mức ổn định, như mọi khi, tất cả về tốc độ chúng ta có thể thoát ra và đốt cháy mọi hồi quy.

Tôi đã có cùng một vấn đề, và tôi đã tìm thấy giải pháp trong bài đăng này của Sam Goddard ,

Các giải pháp nếu để xác định cuộc gọi đến phông chữ hai lần . Đầu tiên, như được khuyến nghị, nên được sử dụng cho tất cả các trình duyệt và sau một cuộc gọi cụ thể chỉ dành cho Chrome với một truy vấn phương tiện đặc biệt:

@font-face {
  font-family: 'chunk-webfont';
  src: url('../../includes/fonts/chunk-webfont.eot');
  src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
  url('../../includes/fonts/chunk-webfont.woff') format('woff'),
  url('../../includes/fonts/chunk-webfont.ttf') format('truetype'),
  url('../../includes/fonts/chunk-webfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'chunk-webfont';
    src: url('../../includes/fonts/chunk-webfont.svg') format('svg');
  }
}

Với phương pháp này, phông chữ sẽ hiển thị tốt trong tất cả các trình duyệt. Điểm trừ duy nhất mà tôi tìm thấy là tệp phông chữ cũng được tải xuống hai lần.

Bạn có thể tìm thấy một phiên bản tiếng Tây Ban Nha của bài viết này trong trang của tôi

Chrome không hiển thị các phông chữ như Firefox hoặc bất kỳ trình duyệt nào khác. Đây thường là sự cố trong Chrome chỉ chạy trên Windows. Nếu bạn muốn làm cho phông chữ mượt mà, hãy sử dụng thuộc -webkit-font-smoothingtính trên h4các thẻ yer như thế này.

h4 {
    -webkit-font-smoothing: antialiased;
}

Bạn cũng có thể sử dụng subpixel-antialiased, điều này sẽ cung cấp cho bạn loại làm mịn khác nhau (làm cho văn bản hơi mờ / bóng). Tuy nhiên, bạn sẽ cần một phiên bản hàng đêm để xem các hiệu ứng. Bạn có thể tìm hiểu thêm về làm mịn phông chữ ở đây .

Ok bạn có thể sử dụng đơn giản

-webkit-text-stroke-width: .7px;
-webkit-text-stroke-color: #34343b;
-webkit-font-smoothing:antialiased;

Hãy chắc chắn rằng màu văn bản của bạn và chiều rộng nét chữ trên phải giống tôi và đó là màu đó.

Tôi sẽ nói trước tất cả rằng điều này sẽ không luôn luôn hoạt động , tôi đã thử nghiệm điều này với sans-serifphông chữ và phông chữ bên ngoài nhưopen sans

Đôi khi, khi bạn sử dụng phông chữ lớn, hãy thử xấp xỉ font-size:49pxvà trên

Đây là văn bản tiêu đề có kích thước 48px ( font-size:48px;trong phần tử có chứa văn bản).

Nhưng, nếu bạn tăng 48px lên font-size:49px;(và 50px, 60px, 80px, v.v ...), điều gì đó thú vị sẽ xảy ra

Các văn bản tự động trở nên trơn tru, và có vẻ thực sự tốt

Đối với một khía cạnh khác ...

Nếu bạn đang tìm kiếm các phông chữ nhỏ, bạn có thể thử cách này, nhưng không hiệu quả lắm.

Đối với cha mẹ của văn bản, chỉ cần áp dụng thuộc tính css tiếp theo: -webkit-backface-visibility: hidden;

Bạn có thể biến đổi một cái gì đó như thế này:

Về điều này:

(phông chữ là Kreon)

Hãy xem xét rằng khi bạn không đặt tài sản đó, -webkit-backface-visibility: visible;là thừa kế

Nhưng hãy cẩn thận , thực tế đó sẽ không cho kết quả tốt, nếu bạn nhìn kỹ, Chrome chỉ làm cho văn bản trông hơi mờ.

Một sự thật thú vị khác:

-webkit-backface-visibility: hidden;cũng sẽ hoạt động khi bạn chuyển đổi một văn bản trong Chrome (với thuộc -webkit-transformtính, bao gồm xoay, nghiêng, v.v.)

Không có -webkit-backface-visibility: hidden;

Với -webkit-backface-visibility: hidden;

Chà, tôi không biết tại sao cách làm đó lại hiệu quả, nhưng nó làm được cho tôi. Xin lỗi vì tiếng Anh kỳ lạ của tôi.