Phông chữ web
Có 2 cách bạn có thể đi về việc xác định phông chữ web @font-face. Đầu tiên, và có lẽ là phổ biến nhất (tôi tin rằng hầu hết các trình tạo, ví dụ Font Squirrel , sẽ xuất ra cái này) là xác định từng tệp phông chữ (tức là mỗi trọng lượng và kiểu) với tên gia đình riêng của nó.
@font-face {
font-family: 'YourFont';
src: url('your_font.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'YourFontBold';
src: url('your_font_bold.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'YourFontItalic';
src: url('your_font_italic.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Lưu ý font-weightvà font-stylemỗi cái được đặt thành bình thường và mỗi cái có một font-familytên duy nhất . Điều này có nghĩa là bất cứ khi nào bạn đặt font-weighthoặc font-stylebất kỳ thứ gì khác hơn bình thường, bạn sẽ nhận được các kiểu trình duyệt "giả", chứ không phải các kiểu từ tệp phông chữ chính xác. Điều này cũng có thể dẫn đến "in đậm" gấp đôi hoặc in nghiêng nếu bạn không đặt lại các kiểu CSS của trình duyệt mặc định thành 'bình thường'. Ví dụ:
strong {
font-family: 'YourFontBold';
}
Nếu không thiết lập font-weightlại mức bình thường, điều đó sẽ hiển thị táo bạo hơn mức cần thiết vì trình duyệt đang tải tệp phông chữ đậm và thêm kiểu in đậm giả của chính nó vì kiểu mặc định stronglà font-weight: bold;.
Một cách tốt hơn:
@font-face {
font-family: 'YourFont';
src: url('your_font.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'YourFont';
src: url('your_font_bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'YourFont';
src: url('your_font_italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
Lưu ý định nghĩa font-weightvà font-styletương ứng với tệp phông chữ chính xác và tất cả đều sử dụng cùng font-familytên. Khai báo phông chữ của bạn theo cách này có nghĩa là bạn có thể sử dụng font-weightvà font-styleở bất kỳ đâu trong CSS của bạn chính xác như bạn mong đợi và bạn sẽ có được phông chữ chính xác, không có kiểu "giả".
Chỉ có các từ khóa "in đậm" và "in nghiêng" có thể được hiểu bởi tất cả các trình duyệt, do đó bạn nên sử dụng số trọng lượng phông chữ cụ thể thay thế. Ngoài ra, hãy nhớ rằng các trình duyệt thường không làm tròn trọng lượng phông chữ tốt, vì vậy hãy chỉ định chính xác trọng lượng bạn muốn và đảm bảo chúng phù hợp với kiểu @font-facekhai báo và CSS của bạn.
Vấn đề với phương pháp này là Internet Explorer 8 trở xuống không nhận ra nhiều kiểu và trọng số sử dụng cùng một font-familytên. Tôi tin rằng điều này cũng gây ra sự cố trong các phiên bản iOS cũ hơn
Phông chữ của Google khắc phục điều này bằng cách phục vụ có điều kiện IE 8 trở xuống chỉ với phông chữ thông thường và để IE "giả" các kiểu khác. Không lý tưởng.
Bài viết này trên smashingmagazine.com đề xuất một cách có điều kiện thêm các kiểu riêng biệt cho Internet Explorer, điều này sẽ giải quyết vấn đề về nhiều trọng số và kiểu:
<link href="http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700,700italic" rel="stylesheet" type="text/css">
<!--[if IE]>
<link href="http://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Droid+Serif:400italic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Droid+Serif:700" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Droid+Serif:700italic" rel="stylesheet" type="text/css">
<![endif]-->
Vì vậy, nếu bạn muốn sử dụng font-weightvà font-styletrong CSS của mình mà không phải lo lắng về tên phông chữ thực tế, đừng dựa vào trình tạo phông chữ web và tự thiết lập @font-facekhai báo chính xác và lưu ý rằng nó sẽ gây ra sự cố trong các trình duyệt cũ hơn.
Phông chữ để bàn
Khai báo các phông chữ không được nhúng bằng cách sử dụng @font-facesẽ chỉ sử dụng các phông chữ được cài đặt trên máy tính của người dùng. Chúng phải tôn trọng bất kỳ font-weightvà font-stylekiểu nào và tải các phông chữ chính xác (Tất cả các thử nghiệm của tôi trong Chrome và Firefox trên OS X đều hoạt động như mong đợi), nhưng điều này có thể phụ thuộc vào trình duyệt và HĐH, và sẽ phụ thuộc vào cách đặt tên của các phông chữ bên trong các tệp phông chữ Những điều mà bạn không thực sự có quyền kiểm soát.