@ vấn đề font-face với font-weight trong Safari

Question

Tôi chỉ mới bắt đầu sử dụng @ font-face Đây là trên đầu trang của css của tôi

@font-face { 
    font-family: Avenir; 
    src: url(../fonts/AvenirLTStd-Medium.otf); 
} 
body{ 
font-family:"Avenir",Helvetica; 
background:#fff url(../images/main_bg.png) repeat-x scroll 0 0; 
color:#321244; 
} 

và tôi có điều này dưới đây cho một menu trên joomla

#menu_bottom ul li a { 
font-size:12px; 
font-weight:600; 
letter-spacing:-0.6px; 
text-transform:uppercase; 

này là vào file html

<li class="item23"><a href="/index.php?option=com_user&amp;view=login&amp;Itemid=13&amp;lang=en"><span>Menu Item</span></a></li> 

này hoạt động trong Firefox, nhưng nó không làm việc một cách chính xác trên Sa fari hoặc Chrome, phông chữ chính xác nhưng trọng lượng phông chữ không hoạt động, tôi đã kiểm tra công cụ nhà phát triển google-chrome và trọng lượng phông chữ được tính là 600. Tôi đã thử sử dụng 100 hoặc 900 kết quả trên safari và chrome giống nhau , trọng lượng phông chữ sẽ không thay đổi.

Có điều gì sai với tuyên bố phông chữ trên đầu tệp css của tôi không?

nên tôi cố gắng thêm một cái gì đó như thế này

@font-face { 
    font-family: Avenir; 
    src: url(../fonts/AvenirLTStd-Heavy.otf); 
    font-style: bold; 
} 

tôi đã cố gắng nhưng didnt làm việc. tôi có nên thêm một phông chữ này mà tôi có trên thư mục phông chữ của tôi

AJensonPro-BoldIt.otf   AvenirLTStd-BookOblique.otf 
AJensonPro-Bold.otf   AvenirLTStd-Book.otf 
AJensonPro-It.otf    AvenirLTStd-HeavyOblique.otf 
AJensonPro-LtIt.otf   AvenirLTStd-Heavy.otf 
AJensonPro-Lt.otf    AvenirLTStd-LightOblique.otf 
AJensonPro-Regular.otf  AvenirLTStd-Light.otf 
AJensonPro-SemiboldIt.otf  AvenirLTStd-MediumOblique.otf 
AJensonPro-Semibold.otf  AvenirLTStd-Medium.otf 
AvenirLTStd-BlackOblique.otf AvenirLTStd-Oblique.otf 
AvenirLTStd-Black.otf   AvenirLTStd-Roman.otf 

Hoặc tôi nên thử một định dạng phông chữ, một cái gì đó không phải là OTF, trong IE dường như được làm việc mặc dù điều độ rộng lớn. Tôi vẫn cần phải sửa lỗi đó.

Answer 1

Như đã giải thích here, bạn phải thêm

font-weight: normal; 
font-style: normal; 

bên trong @ font-face khai và sau đó sử dụng font-weight:600; trên neo của bạn.

Answer 2

Chỉ định giá trị số cho trọng lượng phông chữ là điều bạn làm khi gặp nguy hiểm. Các trình duyệt khác nhau giải thích các giá trị khác nhau và một số không giải thích nó như bất kỳ thứ gì. Tốt nhất là bạn nên sử dụng tiêu chuẩn "đậm" ... trình duyệt nào gần nhất để khớp với một số cách bán thống nhất. Ngoài ra, nếu bạn đang sử dụng kiểu chữ tùy chỉnh, bạn nên chắc chắn người dùng của bạn có chúng trên hệ thống của họ. Ngoài ra, một số phông chữ tùy chỉnh không phản hồi tốt với thuộc tính "đậm" giả. Họ sẽ có một khuôn mặt "táo bạo", như Avenir Bold, Avenir Black, Avenir Demibold, Avenir Demibold Condensed, v.v., v.v.

Ngoài ra, luôn bao gồm đủ phông chữ dự phòng, bao gồm, cuối cùng, "specif" hoặc "sans-serif" hoặc "monospace" thông số chung về phông chữ.

Answer 3

Tốt hơn bao giờ hết. Hy vọng điều này sẽ giúp:

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