Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> CSS

Cách dùng thuộc tính CSS font-stretch

Thuộc tính CSS font-stretch cho phép làm text hẹp hơn (condensed) hoặc rộng hơn (expanded).

Các loại font này còn gọi là font condensed hoặc expanded.

  • Condensed fonts có ký tự nét chữ hẹp. Khoảng cách giữa các ký tự (letter-spacing/leading) cũng hẹp hơn nhiều so với font regular.
  • Expanded fonts có ký tự nét chữ rộng hơn font bình thường theo tỷ lệ với chiều cao.

Thuộc tính CSS font-stretch có các giá trị sau (font face varieties):

  • ultra-condensed
  • extra-condensed
  • condensed
  • semi-condensed
  • normal
  • semi-expanded
  • expanded
  • extra-expanded
  • ultra-expanded

Ví dụ code

h1 { font-family: sans-serif; font-stretch: expanded; } h2 { font-family: sans-serif; font-stretch: condensed; }

Quan trọng: hầu hết typefaces/font families không có sẵn các font face condensed hoặc expanded.

Vì vậy, trước khi dùng font-stretch trong CSS stylesheet, hãy chắc chắn font family bạn dùng chứa font face condensed/expanded cụ thể bạn muốn.

Lưu ý: nếu bạn dùng font-stretch mà font-family không cung cấp font face condensed/expanded, thì không có gì xảy ra. Bạn không nhận được font faux (do máy tính sinh) xấu xí, khác với faux bold hay faux italics.

Tuy nhiên, công nghệ trình duyệt thường thay đổi, tại sao phải rủi ro?