Phông chữ có thể thay đổi trên web bằng CSS

Các biến thể phông chữ là một tập hợp các tính năng mới được xác định là một phần của đặc tả OpenType. Nó cho phép các file phông chữ chứa nhiều biến thể của một phông chữ trong một file duy nhất, được gọi là phông chữ biến đổi. Điều này lần lượt cho phép sử dụng một file phông chữ trên web có thể đạt được nhiều kiểu phông chữ.

Ngoài việc tiết kiệm rõ ràng các lượt dữ liệu cần được gửi qua dây để hiển thị văn bản trên trang, các phông chữ có thể thay đổi cho phép các tính năng như hoạt ảnh hoặc chuyển đổi kiểu phông chữ và kiểu phông chữ tùy chỉnh, cả hai đều không khả thi với tĩnh phông chữ.

Hãy xem qua một số ví dụ về việc sử dụng một phông chữ thay đổi, và sau đó phân tích cách sử dụng chúng trên web ngày hôm nay.

Ví dụ về phông chữ có thể thay đổi

Lưu ý bạn cần sử dụng trình duyệt hỗ trợ để xem đúng các ví dụ bên dưới.

Biến nguồn Sans

Nguồn Sans là một phông chữ miễn phí phổ biến hiện có trong một version có thể thay đổi. Di chuột qua văn bản để xem cách giá trị của font-weight có thể được chuyển đổi:

Xem Pen XWdaGLZ của alligatorio ( @alligatorio ) trên CodePen .

Và điều này đạt được bằng cách sử dụng một số luật CSS rất đơn giản:

@font-face {
  font-family: 'Source Sans';
  src: url('/assets/fonts/variable/SourceSansVariable-Roman.ttf') format("truetype-variations");
  font-weight: 1 999;
}

.source-sans, .source-sans2, .source-sans3 {
  font-family: 'Source Sans';
  transition: font-weight .45s ease-out;
}

.source-sans:hover, .source-sans2:hover {
  font-weight: 999;
}
.source-sans3:hover {
  font-weight: 200;
}

Kiểu phông chữ tùy chỉnh

Dưới đây là một số ví dụ, tất cả đều sử dụng cùng một phông chữ, Decovar , một phông chữ có thể thay đổi xác định các trục tùy chỉnh và cho phép văn bản cách điệu và độc đáo:

Xem Pen RwaZdXX của alligatorio ( @alligatorio ) trên CodePen .

Và đây là các luật CSS được sử dụng cho điều đó:

@font-face {
  font-family: Decovar;
  src: url('/assets/fonts/variable/DecovarAlpha-VF.subset.ttf') format("truetype-variations");
}

.decovar, .decovar2, .decovar3 {
  font-family: Decovar;
}

.decovar {
  color: var(--green3);
  font-variation-settings: "BLDA" 506.944, "TRMC" 1000, "TRMK" 324.653;
}
.decovar2 {
  color: hotpink;
  font-variation-settings: "WMX2" 580.838, "TRMB" 1000;
}
.decovar3 {
  color: rebeccapurple;
  font-variation-settings: "TRMF" 159.18, "TRME" 1000;
}

Đến đây bạn đã thấy một số ví dụ thực tế, hãy xem qua một số khái niệm và cách sử dụng các phông chữ biến đổi trong các trang web của bạn .

Trục phông chữ

Phông chữ biến đổi xác định các biến thể của chúng thông qua các trục biến đổi. Có 5 trục tiêu chuẩn:

ital : Kiểm soát phần in nghiêng. Giá trị có thể được đặt bằng thuộc font-style CSS font-style .
opsz : Kiểm soát kích thước quang học của phông chữ. Giá trị có thể được đặt bằng thuộc tính CSS font-optical-sizing .
slnt : Kiểm soát độ nghiêng của phông chữ. Giá trị có thể được đặt bằng thuộc font-style CSS font-style .
wght : Kiểm soát độ wght của phông chữ. Giá trị có thể được đặt bằng thuộc font-weight CSS font-weight .
wdth : Kiểm soát độ rộng của phông chữ. Giá trị có thể được đặt bằng thuộc font-stretch CSS font-stretch .

Phông chữ cũng có thể chỉ định các trục tùy chỉnh và chúng cần phải có tên 4 chữ hoa thay vì tên 4 chữ thường của các trục tiêu chuẩn. Phông chữ Decovar được giới thiệu ở trên là một ví dụ điển hình về phông chữ sử dụng vô số trục tùy chỉnh.

Các trục tiêu chuẩn có thể được đặt bằng các thuộc tính CSS nổi tiếng (ví dụ: wdth được đặt bằng font-weight ) và các font-variation-settings CSS font-variation-settings wdth font-variation-settings được sử dụng để kiểm soát các giá trị cho các trục.

Ví dụ: ở đây ta xác định một kiểu cho phông chữ biến NobotoFlex :

h1 {
  font-variation-settings: "BASE" 500, "SPAC" 200, "wght" 322, "HEIG" 456;
}

Cách khác có thể được định nghĩa như thế này:

h1 {
  font-weight: 322
  font-variation-settings: "BASE" 500, "SPAC" 200, "HEIG" 456;
}

Bạn nên sử dụng các thuộc tính CSS root cho các trục có một.

Lưu ý phông chữ không nhất thiết phải triển khai tất cả 5 trục tiêu chuẩn, và thay vào đó bạn nên tham khảo tài liệu về phông chữ để biết bạn có thể kiểm soát những trục nào.

Cũng lưu ý cách font-weight có thể nhận các giá trị ở bất kỳ đâu trong repository ảng từ 1 đến 999, so với các gia số 100 giá trị mà ta đã quen.

Sử dụng Phông chữ có thể thay đổi với @ font-face

Sử dụng các phông chữ thay đổi trên web liên quan đến việc xác định các luật @ font-face trỏ đến các file phông chữ biến đổi. Sau đây là tổng quan ngắn gọn về cách nó được thực hiện, nhưng có một số lưu ý mà bạn có thể cần tìm hiểu để hỗ trợ nhiều trình duyệt.

Ví dụ ở đây, ta xác định hai version cho họ phông chữ Source Sans , một thông thường và một in đậm. Cả hai version đều sử dụng cùng một file phông chữ có thể thay đổi, nhưng các file phông chữ khác nhau làm phương án dự phòng cho các trình duyệt không hỗ trợ phông chữ biến đổi:

@font-face {
  font-family: 'Source Sans';
  src: url('/path/to/SourceSansVariable.woff2') format("woff2-variations");
  src: url('/path/to/SourceSans.woff2') format("woff2");
  font-weight: 400;
}

@font-face {
  font-family: 'Source Sans';
  src: url('/path/to/SourceSansVariable.woff2') format("woff2-variations");
  src: url('/path/to/SourceSansBold.woff2') format("woff2");
  font-weight: 900;
}

Và bây giờ nó được dùng trong các luật CSS của bạn như bình thường:

h1 {
  font-family: 'Source Sans';
  font-weight: 900;
}

h2 {
  font-family: 'Source Sans';
  font-weight: 400;
}

Bạn cũng có thể chỉ định một phạm vi trong luật @ font-face của bạn , để duy trì khả năng sử dụng tất cả các giá trị có thể có trong luật CSS thông thường của bạn:

@font-face {
  font-family: 'Source Sans';
  src: url('/path/to/SourceSansVariable.woff2') format("woff2-variations");
  src: url('/path/to/SourceSans.woff2') format("woff2");
  font-weight: 1 999;
}

Với những điều trên, bây giờ ta có thể sử dụng bất kỳ giá trị nào từ 1 đến 999 cho thuộc tính font-weight . Các trình duyệt không hỗ trợ sẽ sử dụng giá trị trọng lượng phông chữ bình thường .

Phông chữ có sẵn

Bạn có thể tìm và chơi với hầu hết các phông chữ biến thể hiện có trên V-fonts.com . Một số open-souce đáng chú ý là Barlow , Mutador Sans , Source Sans , Amstelvar và Cabin VF .

Một số cũng có sẵn thông qua Google Fonts dưới dạng phông chữ truy cập sớm .

TTF sang WOFF2

Các file phông chữ thường sẽ được cung cấp ở định dạng TrueType ( ttf ), nhưng đối với web, bạn nên nén file phông chữ thành định dạng WOFF2 để tiết kiệm dung lượng. Bạn có thể sử dụng một công cụ như FontTools để nén file phông chữ dưới dạng WOFF2. Các công cụ trực tuyến hoặc GUI thân thiện hơn với user chắc chắn sẽ sớm ra mắt.

Hỗ trợ trình duyệt

Hỗ trợ cho các phông chữ thay đổi đã khá tốt , vì vậy về lý thuyết, bạn có thể bắt đầu sử dụng chúng ngay hôm nay. Tuy nhiên, có một số cảnh báo với sự hỗ trợ và một số thứ vẫn đang được chuẩn bị để sử dụng chúng trong CSS như một phần của Mô-đun Phông chữ CSS Cấp độ 4 . Đây là một bản tóm tắt tốt đẹp về những gì vẫn đang thay đổi vào lúc này.

Tài nguyên và Công cụ

Dưới đây là một số tài liệu đọc thêm nếu bạn muốn mở rộng hiểu biết của bạn về việc sử dụng các phông chữ thay đổi trên web:

Và đây là hai công cụ cho phép bạn dễ dàng kiểm tra và tìm ra các phông chữ thay đổi:

Tags:

Các tin liên quan

Làm thế nào để tạo một Web Scraper đồng thời với Puppeteer, Node.js, Docker và Kubernetes
2020-08-19
Cách tạo ứng dụng web tiến bộ với Angular
2020-07-09
Cách cài đặt Django Web Framework trên Ubuntu 20.04
2020-07-06
Cách tạo chế độ xem để phát triển web Django
2020-05-14
Cách tạo chế độ xem để phát triển web Django
2020-05-14
Cách tạo ứng dụng web bằng Flask trong Python 3
2020-04-16
Cách tạo web server trong Node.js bằng module HTTP
2020-04-10
Mã thông báo web JSON (JWT) trong Express.js
2020-02-19
Phát triển bản địa với API thông báo web
2020-02-12
Cách tạo ứng dụng chuyển văn bản thành giọng nói với API giọng nói trên web
2019-12-12