Làm cách nào để đặt ngăn xếp phông chữ web với nhiều kiểu?

Question

phông chữ web có xu hướng đi chia thành các file riêng biệt cho đậm, nghiêng, vv Tôi đang sử dụng một @font-face tờ khai như thế này (tỉa xuống WOFF chỉ ví dụ này):

@font-face { 
    font-family: 'OpenSans'; 
    src: url("fonts/OpenSans-Regular.woff") format("woff"); 
    font-weight: normal; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'OpenSansItalic'; 
    src: url("fonts/OpenSans-Italic.woff") format("woff"); 
    font-weight: normal; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'OpenSansBold'; 
    src: url("fonts/OpenSans-Bold.woff") format("woff"); 
    font-weight: normal; 
    font-style: normal; 
} 

Và sau đó tôi thực hiện các kiểu khác nhau:

body { 
    font-family: "OpenSans", Helvetica, sans-serif; 
} 

strong { 
    font-family: "OpenSansBold", Helvetica, sans-serif; 
    font-weight: normal; /* Web font is already bold */ 
} 

em { 
    font-family: "OpenSansItalic", Helvetica, sans-serif; 
    font-style: normal; /* Web font is already italic */ 
} 

Tôi phải ghi đè kiểu đậm/nghiêng của UA (dòng nhận xét ở trên). Nếu không, nó sẽ thêm một cái nhìn giả/in nghiêng vào văn bản rất xấu xí.

Nếu tôi để nguyên như vậy và một trong các tệp phông chữ web không tải được, thì phông chữ dự phòng sẽ không có kiểu phù hợp. Ví dụ, điều này:

<strong>This text is bold</strong> 

sẽ hiển thị như Helvetica thường xuyên nếu OpenSans-Bold.woff không tải, nhưng tôi muốn nó được Helvetica đậm.

Làm cách nào để đảm bảo rằng phông chữ dự phòng của bạn có kiểu dáng đậm/nghiêng/chính xác?

Answer 1

bạn muốn kết hợp các quy tắc @ phông chữ của mình ..... chỉ khai báo một tên họ phông chữ và khai báo trọng số là các biến của bạn, như in đậm, nghiêng, v.v. bên dưới cho thấy cách sử dụng Mở Sans Regular với Open Sans Bold:

@font-face{font-family:"open_sansregular"; 
src:url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/open-sans-regular.eot"); 
src:url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/open-sans-regular.eot?#iefix") format("embedded-opentype"), 
url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/open-sans-regular.woff") format("woff"), 
url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/open-sans-regular.ttf") format("truetype"), 
url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/open-sans-regular.svg#open_sansregular") format("svg"); 
font-weight:normal; font-style:normal} 

@font-face{font-family:"open_sansregular"; 
src: url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/bold/open-sans-bold.eot"); 
src: url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/bold/open-sans-bold.eot?#iefix") format("embedded-opentype"), 
url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/bold/open-sans-bold.woff") format("woff"), 
url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/bold/open-sans-bold.ttf") format("truetype"), 
url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/bold/open-sans-bold.svg#open_sansbold") format("svg"); 
font-weight:bold; font-style:normal} 

nếu bạn đã quen thuộc wtih @ quy tắc font-face, nó dễ dàng như vậy ... sự khác biệt duy nhất trong hai quy tắc trên là url (s) và font-weight . để in nghiêng, thay đổi url để trỏ tới phông chữ nghiêng, sau đó thay đổi kiểu thành font-style:italic.

có một loạt các lợi ích bạn nhận được từ việc này, bao gồm viết ít hơn vì bạn sẽ không phải redeclare mỗi phông chữ ... bạn chỉ khai báo nó một lần.

nhưng mà về cơ bản giảm css của bạn như thế này:

body{font-family:"OpenSans", Helvetica, sans-serif} 
strong{font-weight:700} 
em{font-style:italic} 

sau đó chỉ cần xây dựng một phông chữ chồng tốt hơn, cung cấp số lượng/mức độ phủ sóng mà bạn mong muốn.