Mặc dù cả hai cách sẽ cung cấp cho bạn đầu ra chính xác, nhưng cách chính xác hơn sẽ là sử dụng một họ phông chữ duy nhất để nhóm tất cả các biến thể khác nhau của trọng lượng và kiểu dáng. Nó giống như cách bạn sử dụng phông chữ hệ thống (từ 'Arial' xuống 'sans-serif') và trên thực tế, nếu bạn sử dụng phông chữ của Google để tải Raleway, bạn sẽ sử dụng tuyến họ phông chữ duy nhất.
Chúng ta hãy phác thảo một số lý do tại sao đây là phương pháp chính xác.
Nó làm giảm độ phức tạp CSS, cuối cùng, kích thước tệp
Có một họ phông chữ có nghĩa là bạn có thể xác định toàn bộ thành phần có chứa họ phông chữ và chỉ một số thành phần nhất định có trọng lượng / kiểu khác nhau. Lấy ví dụ như sau:
html {
font-family: Raleway;
}
.bold {
font-weight: 700;
}
.italic {
font-style: italic;
}
.footer {
font-family: Arial;
}
<p>I'm raleway font, <span class="bold">and I'm raleway bold</span></p>
<div class="bold italic">I'm Raleway Bold Italic!</div>
<div class= footer>I'm <span class="bold">Arial Bold,</span> w/ the same class!</div>
Lưu ý rằng CSS đẹp và phù hợp với CSS này. Chúng tôi không cần chỉ định "RalewayBold" là họ phông chữ cho .bold, cũng không phải "RalewayItalic" cho .italic của chúng tôi. Nguyên vẹn, chúng tôi thậm chí không cần chỉ định một biến thể in đậm và in nghiêng, vì các lớp của chúng tôi sẽ chỉ hoạt động. Hơn nữa, nếu .bold nằm trong .footer của chúng tôi, nó sẽ in đậm Arial chứ không phải Raleway, vì đơn giản là nó thừa hưởng Arial từ thùng chứa chân trang.
Đó là cách trình duyệt làm điều đó.
Trên đây về cơ bản là cách biểu định kiểu nội bộ của trình duyệt xác định phông chữ bằng cách sử dụng các kiểu tối thiểu và bản chất xếp tầng vốn có của CSS.
Đó là cách ngành công nghiệp làm và đã làm nó.
Các thuộc tính web lớn nhất, ứng dụng và nhà xuất bản đều làm theo cách này. Google, Facebook, NYT, ESPN, v.v ... đều xác định và sử dụng phông chữ theo cách này.
Không chỉ vậy, nhưng giao diện người dùng trước CSS hoặc thậm chí internet chỉ định các họ phông chữ duy nhất và chọn các biến thể dựa trên đặc điểm kỹ thuật khác nhau về trọng lượng và kiểu dáng. Tải Microsoft Word, KeyNote, Google Docs, thậm chí là một Worderinf cũ cuối thập niên 1990 và mở trình đơn thả xuống phông chữ; Bạn sẽ thấy tên họ "Arial" được liệt kê; không phải "Arial" theo sau là "Arial Bold" theo sau là "Arial Italic", v.v.
Chỉ cần tải từ Google Fonts.
Nếu bạn tải Raleway từ kho lưu trữ webfonts miễn phí trên Google Fonts, bạn sẽ thấy Raleway được xác định bằng một tên gia đình duy nhất:
https://fonts.googleapis.com/css?family=Raleway:400,400italic.500.500italic.700.700italic
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
src: url(https://...Raleway-Regular.woff2) format('woff2');
}
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 700;
src: url(https://...Raleway-Bold.woff2) format('woff2');
}
@font-face {
font-family: 'Raleway';
font-style: italic;
font-weight: 500;
src: url(https://...Raleway-MediumItalic.woff2) format('woff2');
}
@font-face {
font-family: 'italic';
font-style: normal;
font-weight: 700;
src: url(https://...Raleway-BoldItalic.woff2) format('woff2');
}
