Sử dụng phông chữ @fontface tải nghiêng

Question

Tôi đã css như sau:

@font-face { 
    font-family: 'alegreya'; 
    src:url('fonts/AlegreyaBold.ttf'); 
    font-weight:normal; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'alegreya'; 
    src:url('fonts/AlegreyaBoldItalic.ttf'); 
    font-weight:normal; 
    font-style: italic, oblique; 
} 
@font-face { 
    font-family: 'alegreya'; 
    src:url('fonts/AlegreyaBlack.ttf'); 
    font-weight:bold; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'alegreya'; 
    src:url('fonts/AlegreyaBlackItalic.ttf'); 
    font-weight:bold; 
    font-style: italic, oblique; 
} 

Và một quy tắc cho lớp học của tôi như thế này:

.font-alegreya { 
    font-family:alegreya; 
} 

Và cuối cùng HTML:

<li class="font-alegreya" data-styles="bold, italic, extrabold"> 
    Alegreya - Some sample words. 
</li> 

Bây giờ , Tôi đã đọc here on metaltoad và các địa điểm khác trên SO sử dụng một họ phông chữ duy nhất là cách ưa thích để sử dụng phông chữ tùy chỉnh và Bạn phải đặt chữ in đậm cuối cùng.

Sự cố là phông chữ được hiển thị in nghiêng. Bằng cách sử dụng font-weight:normal trong lớp css, tôi nhận được trọng lượng hiển thị bình thường, nhưng font-style:normal không xóa các chữ nghiêng. Điều này có ý nghĩa, vì dưới (-webkit) "công cụ phát triển" trong tab "tài nguyên", tôi chỉ thấy phông chữ black-italic được tải (thứ hai trong tệp CSS của tôi). Phông chữ được cài đặt trên máy tính của tôi, nhưng tôi đã đổi tên tệp trên máy chủ.

Tôi đã quan sát điều này trong opera (webkit) và IE11, vì vậy đó là mã của tôi.

Chỉnh sửa: Như đã đề cập trong các nhận xét, tôi đã in đậm và đảo ngược màu đen. Điều đó chiếm ưu thế. Nhưng nghiêng vẫn là một vấn đề.

Answer 1

Là David Stone's answer trên câu trả lời có thẩm quyền cho @fontface câu hỏi nêu rõ, this spec nói rằng oblique, italic LÀ hợp lệ.

Như ông đã nói, FF 3.6 không thích hai giá trị. Chôn trong comments có nhiều báo cáo về hai giá trị không hoạt động.

Khi đào vào webkit bug reports, tôi phát hiện ra rằng giá trị cho font-style theo quy định của thông số đã thay đổi từ CSS2 thành CSS3. Theo số later css3 spec, chỉ cho phép một giá trị cho thuộc tính font-style, thay vì một danh sách được phân cách bằng dấu phẩy.

Vì vậy, ngày nay, nếu bạn chuyển vào danh sách được phân tách bằng dấu phẩy, công cụ hiển thị sẽ nói "đó không phải là kiểu phông chữ hợp lệ. Chúng phải có nghĩa là normal". Và ghi đè tuyên bố bình thường trước đó của bạn.

tl; dr: Nếu font face là vẽ tất cả các phông chữ in nghiêng:

font-style: italic, oblique; 

nên

font-style: italic;