Thuộc tính Show
Ví dụ có HTML như sau: <p class="serif"> This is a paragraph shown in serif font. </p> <p class="sansserif"> This is a paragraph shown in sans-serif font. </p> <p class="monospace"> This is a paragraph shown in monospace font. </p> <p class="cursive"> This is a paragraph shown in cursive font. </p> <p class="fantasy"> This is a paragraph shown in fantasy font. </p> Giờ dùng CSS để thiết lập font chữ cho các đoạn văn trên <style> p.serif { font-family: "Times New Roman", Times, serif; } p.sansserif { font-family: Helvetica, Arial, sans-serif; } p.monospace { font-family: "Courier New", Courier, monospace; } p.cursive { font-family: Florence, cursive; } p.fantasy { font-family: Blippo, fantasy; } </style> Kết quả: This is a paragraph shown in serif font. This is a paragraph shown in sans-serif font. This is a paragraph shown in monospace font. This is a paragraph shown in cursive font. This is a paragraph shown in fantasy font. Lưu ý các giá trị trong body { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; } Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người. Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất. Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi. Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới. Facebook 1- CSS fontCSS font được sử dụng để sét phông chữ (font) cho một phần tử, có 2 cách để bạn sử dụng CSS font: CSS {font: «keyword»} Giá trị của CSS font có thể nhận một trong các từ khóa dưới đây, điều này giúp bạn sử dụng các phông chữ đã được định nghĩa sẵn bởi hệ thống, nó phụ thuộc vào trình duyệt và hệ điều hành của người dùng.
CSS {font: «font-size» «font-family» ...; } Giá trị của CSS font có thể là sự kết hợp của các thuộc tính (property): font-size, font-family, font-style, font-variant, ... Dưới đây là cú pháp của CSS font, biểu thức nằm trong dấu ngoặc vuông (square brackets) [ ] là không bắt buộc. Syntax
Hãy xem một ví dụ, nó giúp bạn tạo ra (generate) giá trị cho CSS font.
2- CSS font-familyCSS font-family được sử dụng để bạn chỉ định một danh sách các "font family name" hoặc "generic family name" để áp dụng cho một phần tử, chúng được ngăn cách bởi đấu phẩy, tên phông đầu tiên sẽ được ưu tiên sử dụng, các tên phông tiếp theo là các dự phòng. font family name Là tên của một phông chữ cụ thể nào đó, chẳng hạn Arial, Roboto, Times New Roman, ... generic family name Là một tên chung (generic name) đã được định nghĩa sẵn trong CSS, nó đại diện cho các phông chữ có cùng một đặc điểm nào đó. Khi bạn sử dụng một "tên chung" nghĩa là bạn chỉ quan tâm tới đặc điểm của phông, và trình duyệt sẽ lựa chọn một phông chữ phù hợp cho bạn. Dưới đây là một vài "generic family name" như vậy:
Bạn có thể tìm hiểu thêm về "Generic family name" trong phần phụ lục của bài viết này. Ví dụ với CSS font-family:
font-family-example.html
3- CSS font-sizeCSS font-size được sử dụng để sét kích thước cho font.
Pixel (px) Sét kích thước cho một phần tử theo đơn vị tính pixel (px) là một lựa chọn tốt vì nó là một giá trị tĩnh, độc lập với hệ điều hành và trình duyệt. Em Sét kích thước phông chữ cho một phần tử theo đơn vị tính Em cũng là một lựa chọn tốt trong nhiều tình huống. Em là một giá trị động (dynamic), nó phụ thuộc vào kích thước phông chữ bạn đã sét cho phần tử cha. Giả sử một phần tử được sét {font-size: 2em}, phần tử cha của nó được sét {font-size: 15px}, nghĩa là 1em = 15px suy ra 2em = 30px. unit-em-example.html
Rem Sét kích thước phông chữ theo đơn vị tính Rem nghĩa là kích thước của nó sẽ phụ thuộc vào kích thước phông chữ của phần tử gốc HTML, chứ không phải phần tử cha. Giả sử một phần tử được sét {font-size: 2em}, phần tử gốc HTML của nó được sét {font-size: 15px}, nghĩa là 1rem = 15px suy ra 2rem = 30px. unit-rem-example.html
4- CSS font-weightCSS font-weight được sử dụng để sét trọng lượng (weight) của phông chữ. Nó cũng được hiểu là độ đậm (boldness) của phông chữ.
Theo đặc tả CSS Fonts Module Level 4, trọng lượng của phông chữ có thể có bất kỳ giá trị nào trong khoảng từ 1 đến 1000. Tất cả các giá trị khác được coi là không hợp lệ. Đặc tả này có hiệu lực từ tháng 9 năm 2018. Một số từ khóa như normal, bold, bolder, lighter thường được sử dụng để mô tả trọng lượng của phông chữ:
Một phông chữ được coi là tốt (mịn) nếu nó cung cấp nhiều "mặt chữ" (face) tương ứng với các trọng lượng khác nhau. Thực tế, hầu hết các phông chữ chỉ cung cấp các "mặt chữ" (face) ứng với trọng lượng 400 (Normal) và 700 (Bold). Giả sử một phông chữ chỉ cung cấp các "mặt chữ" (face) ứng với các giá trị 400, 700, 900. Nếu bạn sét {font-weight: 850} cho phần tử, rõ ràng phông chữ này không có sẵn "mặt chữ" với trọng lượng 850, trình duyệt sẽ sử dụng giá trị nhỏ hơn gần nhất, và giá trị 700 được sử dụng. Một số trình duyệt hiện đại sử dụng các thuật toán để tạo ra một "mặt chữ" (face) tưng ứng với 1 trọng lượng bất kỳ dựa trên các "mặt chữ" có sẵn trong bộ phông (font family). Ví dụ dưới đây cho phép bạn thay đổi trọng lượng font từ 1 đến 1000, và xem kết quả. Chú ý: Kết quả mà bạn nhìn thấy có thể khác nhau trên các trình duyệt khác nhau, và hệ điều hành khác nhau. Kết quả quan sát trên trình duyệt Firefox và hệ điều hành Mac OS: 5- CSS font-styleCSS font-style được sử dụng để chỉ định kiểu dáng cho phông chữ.
Các giá trị của CSS font-style: normal Sử dụng các "mặt chữ" (face) thông thường (normal) của bộ phông (font family). italic Sử dụng các "mặt chữ" (face) italic (nghiêng) của bộ phông (font family). Nếu phông chữ hiện tại không có các "mặt chữ" italic thì mặt chữ
oblique (xiên) sẽ được sử dụng như một giải pháp thay thế. oblique Sử dụng các "mặt chữ" (face) oblique (xiên) của bộ phông (font family). Nếu phông chữ hiện tại không có các "mặt chữ" oblique thì mặt chữ italic (nghiêng) sẽ được sử dụng như một giải pháp thay thế. oblique «angle» Sử dụng các "mặt chữ" (face) oblique (xiên) của bộ phông. Tham số «angle» là độ nghiêng (slant) của văn bản. Giá trị của nó từ -90deg tời 90deg, giá trị mặc định là 14deg. Trình duyệt sẽ cố gắng tìm kiếm một "mặt chữ" phù hợp với độ nghiêng mà bạn muốn. Nếu không có "mặt chữ" oblique trong bộ phông này trình duyệt sẽ tạo ra các "mặt chữ" này bằng cách làm nghiêng các "mặt chữ" normal. Ví dụ dưới đây cho phép bạn thay đổi độ nghiêng (slant) của phông chữ, và xem kết quả. Chú ý: Kết quả mà bạn nhìn thấy có thể khác nhau trên các trình duyệt khác nhau, và hệ điều hành khác nhau. Kết quả quan sát trên trình duyệt Firefox. 6- CSS font-stretchTrong một bộ phông (font family), cùng một ký tự có nhiều biến thể mặt chữ (face) với độ rộng (width) khác nhau. CSS font-stretch cho phép bạn chọn một trong các biến thể đó.
Các giá trị có thể của CSS font-stretch: normal Chỉ định các mặt chữ bình thường (normal). semi-condensed, condensed, extra-condensed, ultra-condensed Chỉ định mặt chữ cô đọng (condensed) hơn bình thường (normal), hay nói cách khác là chiều rộng hẹp hơn bình thường. Với ultra-condensed là cô đọng nhất. semi-expanded, expanded, extra-expanded, ultra-expanded Chỉ định mặt chữ được mở rộng (expanded) hơn bình thường (normal), hay nói cách khác là chiều rộng lớn hơn bình thường. Với ultra-expanded là mở rộng nhất. «percentage» CSS stretch cũng chấp nhận giá trị phần trăm ( % ), giá trị hợp lệ trong khoảng 50% đến 200%.
Một bộ phông (font family) có thể không có sẵn các mặt chữ (face) ứng với mọi giá trị phần trăm (Hoặc 9 từ khóa nói trên) của CSS font-stretch. Trình duyệt sẽ tìm kiếm một mặt chữ phù hợp có sẵn trong font family, nó không tự động tạo ra một mặt chữ mới bằng các thuật toán hình học. 7- CSS font-synthesisHầu hết các phông chữ phương Tây tiêu chuẩn bao gồm các biến thể in nghiêng (italic) và in đậm (bold), nhưng nhiều phông chữ mới lạ thì không. Các phông chữ được sử dụng cho tiếng Trung, tiếng Nhật, tiếng Hàn và các tập lệnh logic khác có xu hướng không bao gồm các biến thể này. Các trình duyệt có thể tự tổng hợp (synthesize) ra các biến thể bold, italic. Hay nói cách khác, các trình duyệt sử dụng các thuật toán để tạo ra các mặt chữ (face) nghiêng (italic) và đậm (bold) từ các mặt chữ thông thường (normal). CSS font-synthesis cho phép bạn chỉ định "kiểu mặt chữ" (typeface) nào trình duyệt được phép tự động tạo ra biến thể.
Các giá trị có thể của CSS synthesis: none Nếu bộ phông (font family) không có sẵn các mặt chữ italic, bold trình duyệt không được phép tự tạo ra các mặt chữ này. style Nếu bộ phông chữ (font family) không có mặt chữ italic, trình duyệt được phép tạo ra các mặt chữ này tự động từ mặt chữ normal. Nhưng không được phép tự động tạo ra mặt chữ bold. weight Nếu bộ phông chữ (font family) không có mặt chữ bold, trình duyệt được phép tạo ra các mặt chữ này tự động từ mặt chữ normal. Nhưng không được phép tự động tạo ra mặt chữ italic. style weight || weight style Nếu bộ phông chữ (font family) không có mặt chữ bold hoặc italic, trình duyệt được phép tạo ra các mặt chữ này tự động từ mặt chữ normal. Sự hỗ trợ CSS font-synthesis của các trình duyệt:
Ví dụ với CSS font-synthesis. font-synthesis-example.html
font-synthesis-example.css
Kết quả chạy ví dụ trên với trình duyệt Firefox (Trình duyệt hỗ trợ CSS font-synthesis). 8- Appendix: Generic family names |