CSS Text and typography

Summary

• @font-face, font-family, font-style, font-weight, font-size, line-height, letter-spacing, ...
• text-transform, text-decoration

Font

• @font-face

  • Định nghĩa một font chữ tùy chỉnh và sử dụng nó trên trang web của mình. Phải khai báo font-face custom trước rồi mới được sử dụng ở font-family
  • Cho phép sử dụng font từ remote server, hoặc font ở user device. Thường đây sẽ là custom font
  • local() function cho phép ta có thể search font ở user device.
  • @font-face can’t be declared inside a CSS selector block.

• font-family

  • Là thuộc tính CSS, dùng để chỉ định font chữ sẽ được dùng cho 1 phần tử cụ thể.
  • font được sử dụng ở font-family có thể là: web-safe fonts, system fonts hoặc custom fonts đã define ở font-face
  • Accept 1 list các fonts, font nào được tìm thấy đầu tiên sẽ được chọn để hiển thị.

• font-style

  • Để chỉ định kiểu chữ: normal, italic hoặc oblique
    • oblique - Các kí tự được nghiêng về phía bên phải một cách cơ học. Ký tự không thay đổi, chỉ khác là nó nghiêng :v Ta có thể setup độ nghiêng cho chữ.
    • italic - Các kí tự được thiết kế lại hoàn toàn, mềm mại hơn.

• font-weight

  • Set độ đậm của chữ. Có thể sử dụng các keywords: normal, bold, lighter, bolder hoặc dạng số: từ 100 đến 900.
  • The keywords normal and bold are equivalent to the numeric values 400 and 700, respectively.

• font-size

  • Control size of text elements.
  • Có thể set bằng keywords: absolute keywords: xx-small, x-small, small, medium, large, x-large, xx-large, hoặc các relative keywords smaller, larger - relative từ parent element font-size

• line-height

  • Chiều cao của mỗi dòng trong 1 phần tử.
  • Accept number, length, percentage, or keyword normal
  • Recommend sử dụng number thay vì length/ percentage, tránh issues với việc kế thừa từ phần tử cha.

• letter-spacing

  • Control space giữa các chữ cái.

• word-spacing

  • space giữa các word

Font short hand

Notes

font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];

• text-transform
  • Transform text: uppercase, lowercase, capitalize
• text-decoration
  • Add decoration for text, eg: underline
• text-decoration-line
  • Decoration for the line. eg: overline, line-through
• text-decoration-color
  • set color of all decorations from text-decoration-line.
• text-decoration-style
  • Accept keywords solid, double, dotted, dashed, wavy - gần giống border style
  • Cũng là underline nhưng style khác đi =))
• text-decoration-thickness
  • Độ dày mỏng của gạch chân

Notes

text-decoration: text-decoration-line || text-decoration-style || text-decoration-color || text-decoration-thickness;

• text-overflow
• white-space: Property control white-space trong đoạn văn

Giá trị	Giữ khoảng trắng	Giữ dòng trống	Ngắt dòng khi quá dài	Gộp nhiều dấu cách	Mô tả chi tiết
normal	Không	Không	Có	Có	Mặc định. Nhiều khoảng trắng được gộp lại thành một và văn bản tự động ngắt dòng khi cần.
nowrap	Không	Không	Không	Có	Tất cả khoảng trắng liền kề được gộp lại và văn bản không ngắt dòng, luôn trên cùng một dòng.
pre	Có	Có	Không	Không	Văn bản sẽ không ngắt dòng, khoảng trắng và dòng trống được giữ nguyên hoàn toàn.
pre-wrap	Có	Có	Có	Không	Văn bản sẽ giữ nguyên khoảng trắng và dòng trống, nhưng ngắt dòng khi cần thiết.
pre-line	Không	Có	Có	Có	Văn bản ngắt dòng ở những nơi cần thiết, dòng trống được giữ lại nhưng khoảng trắng bị gộp lại.
break-spaces	Có	Có	Có	Không	Giữ nguyên khoảng trắng và ngắt dòng nếu cần, không gộp dấu cách, không ngắt dòng giữa các dấu cách lớn.

• word-break

  • Control cách break word khi tràn dòng
  • normal, break-all, ..

• text-align

  • Control text start ở left/ right/ start/ end/ center/ justify/ match-parent

• direction, writing-mode, text-orientation, text-shadow

• Pseudo Element

::first-letter and ::first-line pseudo-elements ::selection

Font variant

Font MIME types

Format	MIME Type
TrueType	font/ttf
OpenType	font/otf
Web Open Font Format	font/woff
Web Open Font Format 2	font/woff2

serif, sans-serif, and monospace

• Serif: Loại chữ mà có đường gạch ngang ở đầu hoặc ở cuối các kí tự.
• sans-serif: Loại chữ không có đường gạch ngang ở đầu hoặc cuối các kí tự. ⇒ Cho cảm giác hiện đại hơn
• monospace: Loại chữ mà tất cả các kí tự đều có chiều rộng và khoảng cách giống hệt nhau, bất kể là chữ “i” mảnh hay chữ “w” rộng.