CSS - Phông chữ Web: Hướng dẫn cho người mới bắt đầu
Xin chào các nhà thiết kế web tương lai! Tôi rất vui mừng được làm hướng dẫn viên của bạn trong hành trình thú vị vào thế giới của Phông chữ Web CSS. Là một ai đó đã dạy khoa học máy tính trong nhiều năm, tôi có thể nói rằng việc hiểu phông chữ giống như học một ngôn ngữ mới - nó có thể看起来 khó khăn ban đầu, nhưng một khi bạn nắm vững nó, bạn sẽ ngạc nhiên trước cách nó thay đổi trang web của bạn!
Phông chữ Web là gì?
Trước khi chúng ta đi vào chi tiết, hãy bắt đầu với những điều cơ bản. Phông chữ Web là những phông chữ tùy chỉnh mà bạn có thể sử dụng trên trang web của mình, bất kể chúng có được cài đặt trên máy tính của người dùng hay không. Chúng giống như việc赐予 trang web của bạn một giọng nói duy nhất!
Tại sao phông chữ Web lại quan trọng?
Hãy tưởng tượng nếu mỗi cuốn sách trên thế giới đều sử dụng cùng một phông chữ. House, phải không? Phông chữ Web cho phép bạn thể hiện tính cách của trang web và cải thiện khả năng đọc. Chúng là bí quyết giúp trang web của bạn nổi bật giữa đám đông!
Phông chữ Web CSS - Định dạng phông chữ
Bây giờ, hãy nói về các loại định dạng phông chữ khác nhau. Điều này giống như việc chọn giữa các hương vị kem - mỗi loại đều có đặc điểm riêng!
| Định dạng | Mô tả | Hỗ trợ trình duyệt |
|---|---|---|
| TTF/OTF | TrueType Font / OpenType Font | Tất cả các trình duyệt hiện đại |
| WOFF | Web Open Font Format | Tất cả các trình duyệt hiện đại |
| WOFF2 | Web Open Font Format 2 | Hầu hết các trình duyệt hiện đại |
| EOT | Embedded OpenType | Internet Explorer |
| SVG | Scalable Vector Graphics | Các phiên bản cũ của iOS |
Đừng lo lắng nếu điều này看起来 như một hỗn hợp các chữ cái hiện tại. Chúng ta sẽ phân tích chúng khi chúng ta tiếp tục!
Phông chữ Web CSS - Các điểm chính
Trước khi chúng ta bắt đầu viết mã, hãy xem qua một số điểm chính:
- Phông chữ Web cho phép bạn sử dụng phông chữ tùy chỉnh trên trang web của mình.
- Chúng được tải từ một máy chủ, không phải từ máy tính của người dùng.
- Bạn có thể sử dụng các dịch vụ như Google Fonts hoặc tự host phông chữ.
- Có các định dạng phông chữ khác nhau để tương thích với trình duyệt.
- Quy tắc
@font-faceđược sử dụng để xác định phông chữ tùy chỉnh trong CSS.
Phông chữ Web CSS - Quy tắc @font-face
Bây giờ, hãy đi vào một chút mã! Quy tắc @font-face giống như việc giới thiệu một phông chữ mới cho trang web của bạn. Dưới đây là cách nó trông như thế nào:
@font-face {
font-family: 'MyAwesomeFont';
src: url('path/to/my-awesome-font.woff2') format('woff2'),
url('path/to/my-awesome-font.woff') format('woff');
font-weight: normal;
font-style: normal;
}Hãy phân tích điều này:
-
font-family: Đây là tên bạn đang đặt cho phông chữ của mình. Bạn sẽ sử dụng tên này sau để áp dụng phông chữ cho các phần tử. -
src: Điều này xác định nơi tìm thấy tệp phông chữ và định dạng của nó. -
font-weightvàfont-style: Những này xác định đặc điểm của phông chữ.
Sau khi xác định phông chữ của bạn, bạn có thể sử dụng nó như sau:
body {
font-family: 'MyAwesomeFont', sans-serif;
}Điều này告诉 trình duyệt, "Nè, sử dụng MyAwesomeFont, nhưng nếu bạn không thể tìm thấy nó, hãy quay lại bất kỳ phông chữ sans-serif nào."
Phông chữ Web CSS - @font-face / font-stretch
Thuộc tính font-stretch giống như một lớp yoga cho phông chữ của bạn. Nó cho phép bạn kéo căng hoặc nén phông chữ. Dưới đây là cách bạn có thể sử dụng nó:
@font-face {
font-family: 'StretchyFont';
src: url('path/to/stretchy-font.woff2') format('woff2');
font-stretch: ultra-expanded;
}
.stretched-text {
font-family: 'StretchyFont';
font-stretch: 150%;
}Điều này sẽ làm cho văn bản của bạn看起来 như thể nó đã đến phòng tập và tăng cơ một chút!
Phông chữ Web CSS - Dịch vụ phông chữ trực tuyến
Sử dụng dịch vụ phông chữ trực tuyến giống như việc đặt đồ ăn thay vì nấu ăn - nó tiện lợi và có nhiều sự lựa chọn. Google Fonts là một lựa chọn phổ biến. Dưới đây là cách bạn có thể sử dụng nó:
- Truy cập Google Fonts và chọn một phông chữ bạn thích.
- Sao chép thẻ liên kết được cung cấp và dán nó vào
<head>của HTML:
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">- Sử dụng phông chữ trong CSS của bạn:
body {
font-family: 'Roboto', sans-serif;
}Và voilà! Bạn bây giờ đang sử dụng một phông chữ tùy chỉnh từ Google Fonts.
Phông chữ Web CSS - Nhập phông chữ
Một cách khác để bao gồm phông chữ web là sử dụng quy tắc @import. Điều này giống như việc mời một phông chữ đến tiệc CSS của bạn. Dưới đây là cách nó hoạt động:
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body {
font-family: 'Roboto', sans-serif;
}Phương pháp này cho phép bạn giữ tất cả các khai báo phông chữ trong tệp CSS của bạn, điều mà một số nhà phát triển thích cho việc tổ chức.
Kết luận
Chúc mừng! Bạn vừa mới bước vào thế giới kỳ diệu của Phông chữ Web CSS. Nhớ rằng, như việc học bất kỳ kỹ năng mới nào, thực hành là chìa khóa của thành công. Đừng sợ thử nghiệm với các phông chữ khác nhau và xem chúng thay đổi的外观 và cảm xúc của trang web của bạn.
Khi chúng ta kết thúc, đây là một câu chuyện nhỏ từ kinh nghiệm giảng dạy của tôi: Tôi từng có một học sinh gặp khó khăn với thiết kế web. Cô ấy không thể hiểu tại sao trang web của mình trông quá... tầm thường. Sau đó chúng tôi đã học về phông chữ web, và điều đó giống như một ánh sáng bulb sáng lên. Ngay lập tức, trang web của cô ấy từ nhàm chán trở nên đẹp mắt. Đó là sức mạnh của phông chữ web!
Vậy hãy tiến lên, chơi với phông chữ, và xem trang web của bạn sống động. Chúc mừng编码, và hãy nhớ - trong thế giới thiết kế web, giới hạn duy nhất là trí tưởng tượng của bạn!
Credits: Image by storyset