Theo hướng dẫn CSS của nhà phát triển mozilla :
in nghiêng: Đặt văn bản để sử dụng phiên bản in nghiêng của phông chữ nếu có ; nếu không có sẵn, nó sẽ mô phỏng chữ nghiêng với xiên thay thế.
xiên: Đặt văn bản để sử dụng phiên bản mô phỏng của phông chữ in nghiêng, được tạo bằng cách nghiêng phiên bản bình thường.
Từ đây, chúng tôi suy luận rằng nếu không có phiên bản in nghiêng của phông chữ , cả chữ nghiêng và xiên đều hoạt động theo cùng một cách. Vì đoạn mã W3Schools không chỉ định cụ thểfont-family , tôi tin rằng một phông chữ mặc định được sử dụng; một phông chữ mặc định có thể không có phiên bản in nghiêng.
Nhưng làm thế nào để làm cho một phiên bản in nghiêng của phông chữ có sẵn?
Điều này có nghĩa là chúng tôi có ít nhất hai phiên bản của cùng một phông chữ, một phiên bản "thông thường" và một phiên bản in nghiêng. Đây có thể được chỉ định trong <style>phần với @font-facequy tắc. Vui lòng đọc ngắn gọn: developer.mozilla , w3schools , tympanus.net . Như bạn có thể thấy, phông chữ được tải dưới dạng tệp, có thể có các phần mở rộng sau:eot, otf, woff, truetype .
Cho đến nay, tôi tìm thấy hai cách liên kết tệp phông chữ
URL tuyệt đối của tệp phông chữ: (đoạn mã từ tympanus.net )
`@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'),
url (http://themes.googleusercontent.com/static/fonts/opensans/v8/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
src: local('Open Sans Italic'), local('OpenSans-Italic'),
url
(http://themes.googleusercontent.com/static/fonts/opensans/v8/
xjAJXh38I15wypJXxuGMBobN6UDyHWBl620a-IRfuBk.woff)
format('woff');
}`
Xin lưu ý rằng trong cả hai trường hợp chúng tôi có font-family: 'Open Sans', về cơ bản xác định cùng một phông chữ; nhưng trong trường hợp đầu tiên chúng ta có font-style: normal;, trong trường hợp thứ hai chúng ta có font-style: italic;. Cũng lưu ý rằng các URL trỏ đến các tệp khác nhau. Bây giờ, quay trở lại đoạn mã w3schools, đó là cách trình duyệt có thể phân biệt giữa font-style: normalvàfont-style: italic
sử dụng đường dẫn tương đối đến tệp phông chữ: (đoạn mã từ metaltoad.com )
Thay vì xác định các giá trị họ phông chữ riêng biệt cho mỗi phông chữ, Bạn có thể sử dụng cùng tên họ phông chữ cho mỗi phông chữ và xác định kiểu phù hợp, như vậy:
`@font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-R-webfont.eot');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-I-webfont.eot');
font-weight: normal;
font-style: italic;
}`
Trong trường hợp này, các .eottệp phải được lưu trữ trong cùng thư mục với trang html. Một lần nữa, lưu ý rằng font-familygiống nhau, font-stylekhác nhau và các url cũng khác nhau: Ubuntu- R -webfont vs Ubuntu- I -webfont.
Ví dụ về phiên bản in nghiêng của phông chữ:
ctan.org : đây là một ví dụ về cách cung cấp các tệp khác nhau cho các kiểu / trọng lượng khác nhau của cùng một phông chữ. Không in đậm hoặc in nghiêng được tính tại chỗ, chúng được lấy từ tệp cụ thể của chúng.
