1. Web
  2. CSS
  3. Reference
  4. Properties
  5. font-smooth

font-smooth

Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.

Thuộc tính font-smooth CSS kiểm soát việc áp dụng khử răng cưa khi hiển thị phông chữ.

Cú pháp

css
/* Giá trị từ khóa */
font-smooth: auto;
font-smooth: never;
font-smooth: always;

/* Giá trị <length> */
font-smooth: 2em;

/* Giá trị toàn cục */
font-smooth: inherit;
font-smooth: initial;
font-smooth: revert;
font-smooth: revert-layer;
font-smooth: unset;

Note: WebKit triển khai một thuộc tính tương tự, nhưng với các giá trị khác nhau: -webkit-font-smoothing. Nó chỉ hoạt động trên macOS.

  • auto - Để trình duyệt quyết định (Sử dụng khử răng cưa subpixel khi có sẵn; đây là giá trị mặc định)
  • none - Tắt làm mịn phông chữ; hiển thị văn bản với các cạnh sắc nét.
  • antialiased - Làm mịn phông chữ ở cấp độ pixel, trái với subpixel. Chuyển từ hiển thị subpixel sang khử răng cưa cho văn bản sáng trên nền tối làm cho nó trông nhạt hơn.
  • subpixel-antialiased - Trên hầu hết các màn hình không phải retina, điều này sẽ cho văn bản sắc nét nhất.

Note: Firefox triển khai một thuộc tính tương tự, nhưng với các giá trị khác nhau: -moz-osx-font-smoothing. Nó chỉ hoạt động trên macOS.

  • auto - Cho phép trình duyệt chọn tối ưu hóa cho làm mịn phông chữ, thường là grayscale.
  • grayscale - Hiển thị văn bản với khử răng cưa thang độ xám, trái với subpixel. Chuyển từ hiển thị subpixel sang khử răng cưa cho văn bản sáng trên nền tối làm cho nó trông nhạt hơn.

Định nghĩa chính thức

Initial valueauto
Applies toall elements
Inheritedyes
Computed valueas specified
Animation typediscrete

Cú pháp chính thức

font-smooth = 
  auto             |
  never            |
  always           |
  <absolute-size>  |
  <length>         

<absolute-size> = 
  xx-small   |
  x-small    |
  small      |
  medium     |
  large      |
  x-large    |
  xx-large   |
  xxx-large

Ví dụ

Ví dụ sử dụng cơ bản

Ví dụ sau đây cho thấy các tương đương Safari/Chromium và Firefox bật làm mịn phông chữ trên macOS. Trong cả hai trường hợp, phông chữ được làm mịn sẽ trông hơi nhạt hơn về trọng lượng.

Đối với những người không dùng hệ thống macOS, đây là ảnh chụp màn hình (phiên bản trực tiếp xuất hiện sau):

Two texts examples one with the font-smooth property and another one without

HTML

html
<p>Without font smoothing</p>

<p class="smoothed">With font smoothing</p>

CSS

css
html {
  background-color: black;
  color: white;
  font-size: 3rem;
}

p {
  text-align: center;
}

.smoothed {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Kết quả

Đặc tả

Không phải là một phần của bất kỳ tiêu chuẩn nào.

Khả năng tương thích trình duyệt

Xem thêm

Help improve MDN

Tìm hiểu cách đóng góp

This page was last modified on by MDN contributors.

Xem trang này trên GitHub • Báo cáo sự cố với nội dung này