Fonts
Font là gì?
Font (Phông chữ) là một tập hợp hoàn chỉnh của các ký tự (character) bao gồm: chữ cái (letter), số, dấu câu, kí tự đặc biệt khác… theo cùng một kiểu hình dáng (họa hình), định dạng (regular, bold, italic...) và kích cỡ (size).
Font có vai trò lớn trong việc thể hiện diện mạo trang web. Việc lựa chọn kiểu chữ và phông chữ rất quan trọng đối với các thiết kế website, nó có tác động rất lớn đến cách người dùng trải nghiệm một trang web.
Ở trong phạm vi bài viết này, chúng ta chỉ nghiên cứu về việc kiểm tra Font trong thiết kế và các lưu ý cho một số thuộc tính CSS Font.
Kiểm tra Font trước khi coding
Điều đầu tiên khi nhận task chính là kiểm tra design, đối tượng cần kiểm tra đầu tiên trong data design chính là font chữ.
Chúng ta có 3 trường hợp sau khi kiểm tra font:
Font chữ thông thường, mặc định có sẵn
Đối với font tiếng Nhật, các font chữ mà design thường dùng có sẵn mặc định trong máy gồm:
Meiryo, MS Gothic, Yu Gothic, Hiragino
font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
font-weight: 500;
Yu Mincho, Hiragino Mincho
font-family: "游明朝", YuMincho, "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
font-weight: 500;
Đối với trường hợp trên, bạn hãy khai báo font-family như trên.
Google, Adobe Font
Khách hàng Nhật thường dùng các loại font khác nhau để làm phong phú design của họ và rất nhiều trường hợp được lấy từ Google hay Adobe font.
Google Font
Là thư viện font-face được cung cấp bởi Google, nó miễn phí và không vi phạm bất kỳ vấn đề về bản quyền.
Bạn có thể dễ dàng tìm kiếm và lấy về để nhúng vào trang web.
Các font hay sử dụng như:
Khi nhúng google font vào web, hãy sử dụng phương thức <link> , không sử dụng @import , bởi vì @import trong CSS sẽ không tối ưu việc tải của web
Adobe Font
Với Abobe font, bạn cần phải được cấp tài khoản trả phí mới có thể lấy được code nhúng vào trong web.
Tài khoản Adobe thường sẽ được cung cấp bởi khách hàng.
Mentor sẽ chịu trách nhiệm hướng dẫn.
Các trường hợp Font đặc biệt
Đối với các trường hợp đặc biệt, khi bạn kiểm tra design và thấy font không tồn tại trong máy và cũng không có trên Google hay Adobe Font.
Hãy liên lạc với khách hàng để xác nhận font đó sẽ dùng theo dạng text hay hình ảnh.
- Nếu dùng dạng text:
- Nhờ khách hàng gởi file font và gói font-face cho font đó.
- Nếu khách hàng không có file font thì hãy đề xuất phương án thay thế font khác để có thể dùng font-face hoặc font mặc định.
- Nếu dùng dạng image:
- Phải có sự xác nhận của khách hàng để được cắt hình thay thế.
- Nhờ khách gửi data design đã được outline cho đối tượng font.
Một số lưu ý về CSS Fonts
Để xem các thuộc tính Font trong design, ta vào Window -> Properties (Photoshop)
Font-size
Giá trị của thuộc tính font-size sẽ ưu tiên dùng đơn vị rem, tức là kế thừa từ font-size của phần tử html(root).
Nếu chúng ta không set giá trị cho thuộc tính font-size cho phần tử html(root) thì giá trị mặc định của font-size khi đó sẽ do trình duyệt quyết định (thông thường là 16px).
Font-weight
Font-weight cũng là thuộc tính cần phải chú trọng của Fonts, khuyến khích dùng value hơn là common weight name.
Ví dụ: font-weight: 600.
| Value | Common weight name |
|---|---|
| 100 | Thin (Hairline) |
| 200 | Extra Light (Ultra Light) |
| 300 | Light |
| 400 | Normal (Regular) |
| 500 | Medium |
| 600 | Semi Bold (Demi Bold) |
| 700 | Bold |
| 800 | Extra Bold (Ultra Bold) |
| 900 | Black (Heavy) |
| 950 | Extra Black (Ultra Black) |
Line-height
Không nên dùng đơn vị cho giá trị của thuộc tính line-height.
Để tính line-height của một chữ, ta lấy chiều cao của chữ chia cho font size của chữ đó.
line-height: 1.6; // (57.6 / 36 = 1.6)
Letter-spacing
Giá trị của thuộc tính letter-spacing sẽ ưu tiên dùng đơn vị em.
Quy ước: 1em = 1000 (giá trị VA trong design).
Vì thế công thức tính letter-spacing của một chữ sẽ là giá trị VA của chữ đó chia cho 1000.
letter-spacing: 0.05em; // (50 / 1000 = 0.05)
Font Shorthand
Cú pháp:
font: [font-style] [font-variant] [font-weight] <font-size>[/line-height] <font-family>;
Giá trị font-size và font-family là bắt buộc phải có. Những thuộc tính khác nếu không có thì sẽ áp dụng giá trị mặc định.
👉 Xem thêm tất cả thuộc tính CSS cho Font ở đây