Làm thế nào để giảm trọng lượng phông chữ trong Firefox trên máy Mac bằng CSS?

Question

Đây là vấn đề của tôi: Tôi đang sử dụng phông chữ cho menu của trang web của tôi, nhưng Firefox trên Mac hiển thị quá đậm Trên PC, mọi thứ hoạt động tốt, phông chữ có kích thước hoàn hảo và trông giống như vậy

Thật không may, trên Mac, tôi phải có một bản hack CSS cho Safari (hoạt động), nhưng tôi không tìm thấy bất kỳ thứ gì tương tự trong Firefox.

Tôi đã thử "hack bóng văn bản", tôi đã thử sử dụng thuộc tính trọng lượng phông chữ (mà khá nhiều không làm bất kỳ điều gì).

Và bây giờ, một số mã!

@font-face { 
    font-family: 'KnockoutHTF48FeatherweightRg'; 
    src: url('font/knockout-htf48-featherweight-webfont.eot'); 
    src: url('font/knockout-htf48-featherweight-webfont.eot?#iefix') format('embedded-opentype'), 
     url('font/knockout-htf48-featherweight-webfont.woff') format('woff'), 
     url('font/knockout-htf48-featherweight-webfont.ttf') format('truetype'), 
     url('font/knockout-htf48-featherweight-webfont.svg#KnockoutHTF48FeatherweightRg')  format('svg'); 
    font-weight: normal; 
    font-style: normal; 

} 

Đối với Safari:

body{ 
    ... 
    -webkit-font-smoothing: antialiased; 
} 

Còn lại nếu FF trên máy Mac và bên phải là FF trên PC (phiên bản tốt) Screenshot http://i44.tinypic.com/ehm72a.jpg

Cảm ơn!

Answer 1

FireFox đã đăng độ phân giải cho hôm nay trên diễn đàn lỗi của chúng. Nó chỉ hoàn thành ngày nay như vậy sẽ không được sử dụng một thời gian, nhưng tất cả chúng ta nên đặt

-webkit-font-smoothing: antialiased; 
-moz-osx-font-smoothing: grayscale; 

trong thẻ body của chúng tôi để thiết lập lại này cho tất cả các trình duyệt. CUỐI CÙNG !! người đàn ông, điều đó làm cho ngày của tôi! Điều này sẽ xuất hiện trong bản phát hành FF tiếp theo.

chủ đề ở đây https://bugzilla.mozilla.org/show_bug.cgi?id=857142

Answer 2

Mỗi phông chữ đều hỗ trợ các trọng số khác nhau. Một số có thể thực sự là điều, những người khác thì không.

Mac và PC sẽ hiển thị cùng một phông chữ khác nhau. Đó là một điều hệ điều hành cốt lõi, và về cơ bản, không có gì bạn có thể làm về nó. :(

kết quả phù hợp Hầu hết có thể đạt được sử dụng giống như Google Webfonts hoặc TypeKit.

Một trong những phông chữ tiêu chuẩn mỏng nhất trên Mac là Helvetica Neue.

Cũng đáng chú ý là font-weight hỗ trợ giá trị 100.200, ... 800.900.

Answer 3

bạn có thể sử dụng,

font-weight:normal !important; 

cho sửa chữa err trực quan hoặc trên firefox Mac.

Answer 4

Có mẹo được giải thích http://dave-bond.com/css/font-too-bold-on-a-mac/ về cơ bản là áp dụng độ mờ: 0,99; đối với các văn bản đó ...

Answer 5

Tôi đã phát hiện ra rằng thực hiện một phiên bản hơi "nhẹ" của biểu tượng là cách tốt nhất để bù đắp cho việc này. Chúng có thể sử dụng được trong Firefox và nhẹ hơn một chút so với tất cả các trình duyệt khác. Trong Illustrator, tôi tạo một biểu tượng 16px. Tôi thay đổi kích thước nó thành 1024px và áp dụng đường dẫn bù đắp là -6px (đây là những con số hoạt động tốt nhất cho tôi). Sau đó tôi xuất khẩu như là một svg, và nhập nó vào IcoMoon để xây dựng biểu tượng-font. Tôi không sử dụng -webkit-font-smoothing: antialiased (hoặc đang chờ xử lý -moz-osx-font-smoothing: grayscale) trừ khi nó là một biểu tượng ánh sáng trên nền tối.Đây là cách tốt nhất tôi đã tìm thấy để có được biểu tượng phông chữ để hiển thị (chủ yếu) thống nhất trên các trình duyệt & nền tảng.

Answer 6

Tìm thấy điều này trên Thủ thuật CSS và các tác phẩm kỳ quặc này.

thêm biểu mẫu này vào biểu định kiểu: -moz-osx-font-smoothing: grayscale;

Answer 7

Điều này chỉ ảnh hưởng đến trình duyệt firefox.

@-moz-document url-prefix() { 
    .classname { 
    font-weight:normal; 

    /* or any other option */ 
    } 
} 

Tận hưởng!