Podcast CSS – 036: Văn bản và kiểu chữ
Văn bản là một trong những thành phần cốt lõi của web.
Khi tạo trang web, bạn không nhất thiết phải tạo kiểu cho văn bản; HTML thực sự có một số kiểu mặc định khá hợp lý.
Tuy nhiên, văn bản có thể sẽ chiếm phần lớn nội dung trên trang web, vì vậy, bạn nên thêm một số kiểu văn bản để trang trí cho trang web đẹp hơn. Bằng cách thay đổi một vài thuộc tính cơ bản, bạn có thể cải thiện đáng kể trải nghiệm đọc cho người dùng!
Trong học phần này, trước tiên, chúng ta sẽ tìm hiểu một số thuộc tính phông chữ CSS cơ bản như font-family, font-style, font-weight và font-size. Sau đó, chúng ta sẽ tìm hiểu sâu về các thuộc tính ảnh hưởng đến các đoạn văn bản, chẳng hạn như text-indent và word-spacing. Mô-đun này kết thúc bằng một số chủ đề nâng cao hơn, chẳng hạn như phông chữ biến đổi và phần tử giả.
Thay đổi phông chữ
Sử dụng font-family để thay đổi kiểu chữ của văn bản.
Thuộc tính font-family chấp nhận danh sách các chuỗi được phân tách bằng dấu phẩy, tham chiếu đến các bộ phông chữ cụ thể hoặc chung. Bộ phông chữ cụ thể là các chuỗi dấu ngoặc kép, chẳng hạn như “ thiếu thốn”, “EB Garamond” hoặc “Times New Roman”. Bộ phông chữ chung là các từ khoá như serif, sans-serif và monospace (xem danh sách đầy đủ các tuỳ chọn trên MDN). Trình duyệt sẽ hiển thị kiểu chữ có sẵn đầu tiên trong danh sách được cung cấp.
Khi sử dụng font-family, bạn nên chỉ định ít nhất một bộ phông chữ chung để phòng trường hợp trình duyệt của người dùng không có phông chữ mà bạn ưu tiên. Nói chung, bộ phông chữ chung dự phòng phải tương tự như phông chữ bạn ưu tiên: nếu sử dụng font-family: "Helvetica" (bộ phông chữ alt-serif), thì phông chữ dự phòng phải là sans-serif để phù hợp.
Dùng phông chữ in nghiêng và nghiêng
Sử dụng font-style để đặt văn bản có phải in nghiêng hay không. font-style chấp nhận một trong các từ khoá sau: normal, italic và oblique.
In đậm văn bản
Dùng font-weight để đặt "độ đậm" của văn bản. Thuộc tính này chấp nhận các giá trị từ khoá (normal, bold), giá trị từ khoá tương đối (lighter, bolder) và giá trị số (100 đến 900).
Từ khoá normal và bold tương đương với giá trị số 400 và 700.
Từ khoá lighter và bolder được tính toán tương ứng so với phần tử mẹ. Xem Ý nghĩa của trọng số tương đối của MDN để biết biểu đồ hữu ích thể hiện cách xác định giá trị này.
Thay đổi cỡ chữ
Sử dụng font-size để điều khiển kích thước của các thành phần văn bản. Thuộc tính này chấp nhận các giá trị độ dài, tỷ lệ phần trăm và một số giá trị từ khoá.
Ngoài các giá trị độ dài và tỷ lệ phần trăm, font-size còn chấp nhận một số giá trị từ khoá tuyệt đối (xx-small, x-small, small, medium, large, x-large, xx-large) và một vài giá trị từ khoá tương đối (smaller, larger). Các giá trị tương đối có liên quan đến font-size của phần tử mẹ.
Thay đổi khoảng cách giữa các dòng
Sử dụng line-height để chỉ định chiều cao của mỗi dòng trong phần tử. Thuộc tính này chấp nhận số, thời lượng, tỷ lệ phần trăm hoặc từ khoá normal. Nói chung, bạn nên sử dụng số thay vì độ dài hoặc phần trăm để tránh các vấn đề về tính kế thừa.
Thay đổi khoảng cách giữa các ký tự
Sử dụng letter-spacing để kiểm soát khoảng không gian theo chiều ngang giữa các ký tự trong văn bản. Thuộc tính này chấp nhận các giá trị độ dài như em, px và rem.
Lưu ý rằng giá trị được chỉ định sẽ tăng khoảng cách tự nhiên giữa các ký tự. Trong bản minh hoạ bên dưới, hãy thử chọn từng chữ cái để xem kích thước của hòm thư và sự thay đổi của chữ cái đó với letter-spacing.
Thay đổi dấu cách giữa các từ
Sử dụng word-spacing để tăng hoặc giảm độ dài khoảng cách giữa mỗi từ trong văn bản. Thuộc tính này chấp nhận các giá trị độ dài như em, px và rem. Xin lưu ý rằng độ dài mà bạn chỉ định là dành cho khoảng cách bổ sung ngoài khoảng cách thông thường. Tức là word-spacing: 0 tương đương với word-spacing: normal.
Viết tắt font
Bạn có thể sử dụng thuộc tính viết tắt font để đặt nhiều thuộc tính liên quan đến phông chữ cùng một lúc. Danh sách các thuộc tính có thể sử dụng là font-family, font-size, font-stretch, font-style, font-variant, font-weight và line-height.
Bạn có thể xem bài viết của font của MMDN để biết thông tin cụ thể về cách sắp xếp các tài sản này.
Thay đổi cách viết hoa của văn bản
Sử dụng text-transform để sửa đổi cách viết hoa của văn bản mà không cần thay đổi HTML cơ bản. Thuộc tính này chấp nhận các giá trị từ khoá sau: uppercase, lowercase và capitalize.
Thêm dấu gạch dưới, dấu gạch đầu và dòng gạch ngang vào văn bản
Sử dụng text-decoration để thêm dòng vào văn bản. Dấu gạch dưới thường được sử dụng nhất, nhưng bạn cũng có thể thêm các dòng phía trên hoặc ngay bên phải văn bản!
Thuộc tính text-decoration là cách viết tắt của các thuộc tính cụ thể hơn, được nêu chi tiết dưới đây.
Thuộc tính text-decoration-line chấp nhận các từ khoá underline, overline và line-through. Bạn cũng có thể chỉ định nhiều từ khoá cho nhiều dòng.
Thuộc tính text-decoration-color đặt màu của tất cả trang trí từ text-decoration-line.
Thuộc tính text-decoration-style chấp nhận các từ khoá solid, double, dotted, dashed và wavy.
Thuộc tính text-decoration-thickness chấp nhận giá trị độ dài bất kỳ và đặt chiều rộng nét của tất cả thành phần trang trí từ text-decoration-line.
Thuộc tính text-decoration là viết tắt của tất cả các thuộc tính ở trên.
Thêm thụt lề vào văn bản
Sử dụng text-indent để thêm thụt lề vào khối văn bản. Thuộc tính này có chiều dài (ví dụ: 10px, 2em) hoặc theo tỷ lệ phần trăm chiều rộng của khối chứa.
Xử lý nội dung bị ẩn hoặc tràn màn hình
Sử dụng text-overflow để chỉ định cách thể hiện nội dung ẩn. Có hai tuỳ chọn: clip (mặc định) cắt bớt văn bản ở điểm tràn; và ellipsis (hiển thị dấu ba chấm (...) ở điểm tràn.
Kiểm soát khoảng trắng
Thuộc tính white-space được dùng để chỉ định cách xử lý khoảng trắng trong một phần tử. Để biết thêm thông tin, hãy xem bài viết về white-space về MDN.
white-space: pre có thể hữu ích cho việc hiển thị nghệ thuật ASCII hoặc các khối mã được thụt đầu dòng cẩn thận.
Kiểm soát cách ngắt từ
Sử dụng word-break để thay đổi cách "hỏng" các từ khi chúng tràn dòng. Theo mặc định, trình duyệt sẽ không phân tách các từ. Việc sử dụng giá trị từ khoá break-all cho word-break sẽ hướng dẫn trình duyệt ngắt các từ ở từng ký tự riêng lẻ, nếu cần.
Thay đổi cách căn chỉnh văn bản
Sử dụng text-align để chỉ định cách căn chỉnh văn bản theo chiều ngang trong một khối hoặc phần tử ô trong bảng. Thuộc tính này chấp nhận các giá trị từ khoá left, right, start, end, center, justify và match-parent.
Các giá trị left và right lần lượt căn chỉnh văn bản theo bên trái và bên phải của khối.
Sử dụng start và end để thể hiện vị trí đầu và cuối của một dòng văn bản ở chế độ viết hiện tại. Do đó, start ánh xạ tới left bằng tiếng Anh và tới right bằng chữ Ả Rập được viết từ phải sang trái (RTL). Chúng là sự sắp xếp logic, hãy tìm hiểu thêm trong mô-đun thuộc tính logic của chúng tôi.
Sử dụng center để căn chỉnh văn bản ở giữa khối.
Giá trị của justify sắp xếp văn bản và tự động thay đổi khoảng cách từ để văn bản nằm ngang hàng với cả cạnh trái và cạnh phải của khối.
Thay đổi hướng của văn bản
Sử dụng direction để đặt hướng của văn bản, ltr (từ trái sang phải, mặc định) hoặc rtl (phải sang trái). Một số ngôn ngữ như tiếng Ả Rập, tiếng Do Thái hoặc tiếng Ba Tư được viết từ phải sang trái, vì vậy, bạn nên sử dụng direction: rtl. Đối với tiếng Anh và tất cả các ngôn ngữ đọc từ trái sang phải khác, hãy sử dụng direction: ltr.
Thay đổi luồng văn bản
Sử dụng writing-mode để thay đổi cách luồng và sắp xếp văn bản. Tuỳ chọn mặc định là horizontal-tb, nhưng bạn cũng có thể đặt writing-mode thành vertical-lr hoặc vertical-rl cho văn bản mà bạn muốn di chuyển theo chiều ngang.
Thay đổi hướng của văn bản
Sử dụng text-orientation để chỉ định hướng của ký tự trong văn bản. Giá trị hợp lệ cho thuộc tính này là mixed và upright. Thuộc tính này chỉ phù hợp khi writing-mode được đặt thành giá trị khác không phải là horizontal-tb.
Thêm bóng vào văn bản
Sử dụng text-shadow để thêm bóng vào văn bản. Thuộc tính này yêu cầu ba độ dài (x-offset, y-offset và blur-radius) và một màu sắc.
Hãy xem phần text-shadow trong học phần của chúng tôi về Bóng để tìm hiểu thêm.
Phông chữ biến đổi
Thông thường, phông chữ "bình thường" yêu cầu nhập các tệp khác nhau cho các phiên bản kiểu chữ khác nhau, ví dụ: đậm, nghiêng hoặc đậm. Phông chữ biến đổi là các phông chữ có thể chứa nhiều biến thể khác nhau của một kiểu chữ trong một tệp.
Hãy xem bài viết của chúng tôi về Phông chữ biến đổi để biết thêm chi tiết.
Yếu tố giả
Các phần tử giả ::first-letter và ::first-line
Các phần tử giả ::first-letter và ::first-line lần lượt nhắm đến chữ cái đầu tiên và dòng đầu tiên của phần tử văn bản.
Phần tử giả ::selection
Sử dụng phần tử giả ::selection để thay đổi giao diện của văn bản do người dùng chọn.
Khi sử dụng phần tử giả này, bạn chỉ có thể sử dụng một số thuộc tính CSS nhất định: color, background-color, text-decoration, text-shadow, stroke-color, fill-color, stroke-width.
font-variant
Thuộc tính font-variant là viết tắt của một số thuộc tính CSS cho phép bạn chọn các biến thể phông chữ như small-caps và slashed-zero. Các thuộc tính CSS (có thể viết tắt là font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures và font-variant-numeric). Hãy xem các đường liên kết trên mỗi tài sản để biết thêm thông tin chi tiết về cách sử dụng.
Kiểm tra mức độ hiểu biết của bạn
Kiểm tra kiến thức của bạn về kiểu chữ trên web
Bạn có thể dùng từ khoá nào sau đây làm từ khoá dự phòng chung font-family?
serifmonospaceitalicitalic là từ khoá hợp lệ cho font-style, không phải cho font-family.sci-fifantasy là một phương án dự phòng chung hợp lệ cho font-family.sans-serifhelvetica"Helvetica" không phải là từ khoá chung chung, mà đề cập đến một bộ phông chữ cụ thể.Câu lệnh nào dùng để chuyển đổi chữ cái đầu tiên của mỗi từ thành chữ hoa? ví dụ: This is a sentence. ... This Is A Sentence.
text-capitalize: true;text-case: capitalize;text-transform: capitalize;font-style: capitals;font-variant: capitalize;Đúng hay sai: Sử dụng text-orientation để căn chỉnh văn bản sang trái, phải hoặc giữa.
text-orientation thay đổi chế độ xoay các chữ cái trong một dòng.text-orientation thay đổi chế độ xoay các chữ cái trong một dòng. Sử dụng text-align để căn chỉnh văn bản sang trái, phải hoặc giữa (và nhiều tính năng khác!).Bạn có thể sử dụng thuộc tính CSS nào để thay đổi khoảng cách giữa các dòng văn bản?
line-spacingleadingbaseline-distanceline-heightTài nguyên
- Các phương pháp hay nhất về phông chữ thảo luận về cách nhập phông chữ, hiển thị phông chữ và các phương pháp hay nhất khác để sử dụng phông chữ trên web.
- Định kiểu văn bản và phông chữ cơ bản của MN.