Chrome SVG webfonts các ký tự lạ trong đầu vào được chọn

Question

Chrome 26.0.1410.64m trên Windows 8 có sự cố khi hiển thị WebFonts. Đó là một vấn đề được biết đến và một giải pháp là lần đầu tiên phục vụ phiên bản svg của phông chữ thay vì phiên bản woff. Nó sửa chữa chống răng cưa và làm cho phông chữ trông khá một lần nữa.

Nhược điểm của phương pháp này là hiển thị lạ bên trong phần tử bên trong các đầu vào được chọn.

Tôi đã thêm một jsfiddle để xem nó hoạt động: http://jsfiddle.net/4mSpv/6/.

CSS đơn giản như vậy.

@font-face { 
    font-family: 'Montserrat'; 
    src: url('https://raw.github.com/louh/website/master/fonts/montserrat-regular-webfont.svg#montserratregular') format('svg'); 
    font-weight: 400; 
    font-style: normal; 
} 
select { 
    font-family: 'Montserrat', sans-serif; 
} 

Tôi xóa cài đặt phông chữ cục bộ và nhận thấy một cửa sổ khác 7 máy tính cũng làm như vậy. Bất cứ ai cũng biết những gì đang xảy ra với chrome? (IE, Firefox, Safari tất cả làm cho tốt)

PS: Trình duyệt Khác phông chữ không được đưa vào JSFiddle để lọc ra các vấn đề và mỗi trình duyệt có quirks riêng của họ (không cho phép font-size vv) mà hầu hết làm văn bản fine

Answer 1

Không có cách nào để giải quyết vấn đề này.

Đây KHÔNG phải là vấn đề hồi quy và hiện có từ M24.

Tôi đã gửi một báo cáo lỗi và nó Weird character rendering in option menu

Answer 2

Như automaticoo nói, nó là một vấn đề được biết đến với Chrome. Tuy nhiên, bạn có thể giải quyết vấn đề bằng kỹ thuật được đề cập trong câu trả lời đã chọn cho bài đăng này: Google Webfonts Render Choppy in Chrome on Windows.

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    select { 
    font-family: Arial; /* standard font */ 
    } 
} 

Bằng cách đó bạn có thể sử dụng bất cứ font bạn muốn cho các trình duyệt mà vẫn làm việc, và thay thế bằng một phông chữ HTML generic cho Chrome.

Answer 3

Vì vậy, tôi thực sự đang tìm kiếm câu trả lời cho điều này, và tôi tình cờ gặp câu hỏi này. Tôi nhận thấy lỗi này vẫn tồn tại ngày hôm nay (tôi vừa mới gặp nó, một cuộc gặp gỡ vui vẻ ...). Bây giờ tôi chỉ tìm thấy 1 giải pháp, đó là đặt phông chữ svg cuối cùng trong khai báo phông chữ @ (điều này cũng có nghĩa là bao gồm tất cả các định dạng khác). Vấn đề duy nhất là, khi bạn kiểm tra cố gắng sửa chữa các font rendering (để làm cho nó tất cả mịn và các công cụ) bạn thực sự sẽ đặt svg đầu tiên. Dưới đây là một số ví dụ để chứng minh nó

1: SVG phông chữ cuối cùng, không có phông chữ sắc nét, tùy chọn được hiển thị ngay

@font-face { 
font-family: 'OpenSansLight'; 
src: url('../font/OpenSans-Light-webfont.eot'); 
src: url('../font/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'), 
    url('../font/OpenSans-Light-webfont.woff') format('woff'), 
    url('../font/OpenSans-Light-webfont.ttf') format('truetype'), 
    url('../font/OpenSans-Light-webfont.svg#open_sanslight') format('svg'); 
font-weight: normal; 
font-style: normal; } 

Như bạn có thể thấy, các tùy chọn trong hộp chọn chỉ hiển thị tốt, nhưng phông chữ thực sự không phải là crips, chỉ cần nhìn vào "Đăng ký" (bạn có thể nhận thấy điều này tốt hơn so với ví dụ thứ hai của tôi)

2: phông SVG cuối cùng, phông chữ sắc nét, tùy chọn ngu ngốc trong lựa chọn

@font-face { 
font-family: 'OpenSansLight'; 
src: url('../font/OpenSans-Light-webfont.eot'); 
src: url('../font/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'), 
    url('../font/OpenSans-Light-webfont.svg#open_sanslight') format('svg'), 
    url('../font/OpenSans-Light-webfont.woff') format('woff'), 
    url('../font/OpenSans-Light-webfont.ttf') format('truetype'); 
font-weight: normal; 
font-style: normal; } 

Bây giờ bạn sẽ thấy rằng các font chữ là rất nhiều sắc nét hơn nhưng chọn thực sự là ngu ngốc.

Tôi đề xuất thêm một phông chữ khác với svg cuối cùng chỉ dành cho lựa chọn. Điều này sẽ giữ cho phông chữ của bạn sắc nét trong suốt trang web nhưng hiển thị các tùy chọn tốt.