@font-face trong css

Khi sử dụng font-face cho web bạn nên sử dụng nhiều định dạng khác nhau trên 1 font-face

in sao vậy

Thứ tự thường dùng khai báo. woff2 -> woff -> ttf/otf -> svg -> eot. Khi các bạn khai báo nhiều đường dẫn tải phông chữ. Quá trình duyệt sẽ tìm theo thứ tự từ trái qua phải, nếu định dạng nào hỗ trợ nó sẽ xây dựng lại ở định dạng đó và không tải các định dạng khác

• Vì sao sử dụng woff2 first

• Vì phông chữ này là loại phông chữ nhẹ nhất. Nó giảm tải dung lượng khi tải trang
• Nhưng nhược điểm của nó là không hỗ trợ các trình duyệt có phiên bản thấp

• đánh trống lảng

• Tương tự nó lại có dung lượng lớn hơn woff2
• Nhưng nó lại sử dụng nhiều trình duyệt có phiên bản thấp hơn. Vì thế nó có ưu tiên thứ 2

• ttf/otf

• Phông chữ có định dạng này thì hỗ trợ rất nhiều trình duyệt có phiên bản thấp. Best is safari could not support from 3. 1 trở lên
• Nhưng nhược điểm của nó rất rất nặng nhé các bạn

• svg, eot

• Các bạn xem bảng hỗ trợ duyệt trên là biết rồi đấy. Nó hỗ trợ rất ít trình duyệt
• Nhưng ưu điểm của nó lại là hỗ trợ các trình duyệt cực thấp. vd. eot could support from IE 6 đấy. Cá nhân tôi rất ít sử dụng 2 loại phông chữ này. Vì thời đại bây giờ chả ai dùng những phiên bản cực thấp như thế này nữa, tuy nhiên nó hỗ trợ ít trình duyệt như thế mà lại có dung lượng lưu trữ lớn => đó cũng là lý do mình không sử dụng được

  Quy tắc CSS

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  5 chỉ định một phông chữ tùy chỉnh để hiển thị văn bản;

  @font-face {
    font-family: "Trickster";
    src: local("Trickster"),
      url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
        format("opentype"), url("trickster-outline.woff") format("woff");
  }
  

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  6

  Xác định số liệu tăng dần cho phông chữ

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  7

  Xác định số liệu gốc cho phông chữ

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  0

  Xác định cách hiển thị mặt phông chữ dựa trên việc nó được tải xuống và sẵn sàng để sử dụng hay không và khi nào nó được tải xuống và sẵn sàng sử dụng

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  1

  Chỉ định một tên sẽ được sử dụng làm mệnh giá phông chữ cho các thuộc tính phông chữ

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  2

  Một giá trị

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  2. Chấp nhận hai giá trị để chỉ định phạm vi được phông chữ hỗ trợ, ví dụ:

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  4

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  5

  Một giá trị

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  5. Chấp nhận hai giá trị để chỉ định phạm vi được phông chữ hỗ trợ, ví dụ:

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  7

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  8

  Một giá trị

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  8. Chấp nhận hai giá trị để chỉ định phạm vi được phông chữ hỗ trợ, ví dụ:

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  10

  Ghi chú. Bộ mô tả biến thể phông chữ đã bị xóa khỏi thông số kỹ thuật vào năm 2018. Thuộc tính giá trị

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  11 được hỗ trợ, nhưng không có mô tả tương đương

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  12

  Cho phép kiểm soát các tính năng đánh máy nâng cao trong phông chữ OpenType

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  13

  Cho phép kiểm soát cấp thấp đối với các biến thể phông chữ OpenType hoặc TrueType, bằng cách chỉ định tên trục bốn chữ cái của các tính năng sẽ thay đổi, cùng với các giá trị biến thể của chúng

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  14

  Xác định số liệu khoảng cách dòng cho phông chữ

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  15

  Xác định hệ số nhân cho các đường viền và chỉ số glyph được liên kết với phông chữ này. Điều này giúp dễ dàng hài hòa thiết kế của các phông chữ khác nhau khi hiển thị ở cùng một cỡ chữ

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  16

  Chỉ định tài nguyên phông chữ. Danh sách được phân tách bằng dấu phẩy thể hiện thứ tự dự phòng tài nguyên, mỗi tài nguyên được chỉ định bởi một

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  17 hoặc

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  18. Nếu tài nguyên trước được tải thành công, tài nguyên sau sẽ không được sử dụng.

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  17 có thể được theo sau bởi

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  10 và

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  11, như thế này

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  17. Chỉ định URL của tệp phông chữ, giống như bất kỳ

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  17 nào khác trong CSS. Nếu tệp phông chữ là một vùng chứa cho nhiều phông chữ, thì một mã định danh phân đoạn được bao gồm để cho biết phông chữ phụ nào sẽ được sử dụng, như sau

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  1

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  18. Chỉ định tên phông chữ nếu phông chữ có sẵn trên thiết bị của người dùng. Trích dẫn tên phông chữ là tùy chọn

  Ghi chú. API truy cập phông chữ cục bộ có thể được sử dụng để truy cập dữ liệu phông chữ được cài đặt cục bộ của người dùng — điều này bao gồm các chi tiết cấp cao hơn như tên, kiểu và họ, cũng như các byte thô của tệp phông chữ bên dưới

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  10. Không bắt buộc. Chỉ định định dạng phông chữ. Nếu giá trị không được hỗ trợ hoặc không hợp lệ, trình duyệt có thể không tải xuống tài nguyên, có khả năng tiết kiệm băng thông. Nếu bỏ qua, trình duyệt sẽ tải luôn tài nguyên và sau đó dò tìm định dạng. Loại giá trị ưa thích là một từ khóa, cũng có thể được cung cấp dưới dạng một chuỗi (trong dấu ngoặc kép) vì lý do tương thích ngược

  Bảng sau đây hiển thị các giá trị hợp lệ và định dạng phông chữ tương ứng của chúng. Có một vài giá trị có thể khác, xem đoạn tiếp theo

  Từ khóaĐịnh dạng phông chữTiện ích mở rộng chung____216WOFF 2. 0. woff2

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  17WOFF 1. 0. woff

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  18OpenType. otf,. ttf____219TrueType. ttf____330Bộ sưu tập OpenType. otc,. ttc

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  31Embedded OpenType. eot________ Phông chữ 332SVG (không dùng nữa). sinh viên,. svgz

  Ghi chú. Giá trị

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  18 và

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  19 là hoàn toàn tương đương, bất kể tệp phông chữ sử dụng đường cong bezier bậc ba (trong bảng CFF/CFF2) hay đường cong bezier bậc hai (trong bảng glyph)

  ____211. Không bắt buộc. Thử nghiệm Giá trị là một trong những từ khóa sau.

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  36,

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  37,

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  38,

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  39,

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  30,

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  31,

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  32,

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  33,

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  34,

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  35,

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  36.

  Bảng sau đây hiển thị một số giá trị

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  10 cũ không chuẩn hóa và cú pháp tương đương mới của chúng

  Cú pháp cũCú pháp tương đương

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  38

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  39

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  30

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  31

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  32

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  33

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  34

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  35

  Ghi chú.

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  36 là viết tắt của phông chữ SVG và

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  37 là viết tắt của phông chữ OpenType với bảng SVG (còn gọi là phông chữ màu OpenType-SVG), hoàn toàn khác nhau

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  38

  Phạm vi điểm mã Unicode sẽ được sử dụng từ phông chữ

  Người dùng thường sử dụng đồng thời cả

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  17 và

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  18 để bản sao phông chữ đã cài đặt của người dùng được sử dụng nếu có sẵn, quay lại tải xuống bản sao của phông chữ nếu không tìm thấy phông chữ này trên thiết bị của người dùng

  Nếu chức năng

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  18 được cung cấp, chỉ định tên phông chữ cần tìm trên thiết bị của người dùng và nếu tác nhân người dùng tìm thấy kết quả phù hợp, thì phông chữ cục bộ đó sẽ được sử dụng. Nếu không, tài nguyên phông chữ được chỉ định bằng hàm

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  17 sẽ được tải xuống và sử dụng

  Tài nguyên được cố gắng tải theo thứ tự, vì vậy thường thì

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  18 nên được viết trước

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  17. Ngoài ra,

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  18 không chỉ là một trợ giúp cho

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  17, chúng bằng nhau và cả hai đều là tùy chọn, một khối quy tắc chỉ chứa một hoặc nhiều

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  18 mà không có

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  17 là có thể

  Bằng cách cho phép các tác giả cung cấp phông chữ của riêng họ,

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  5 có thể thiết kế nội dung mà không bị giới hạn ở cái gọi là phông chữ "an toàn cho web" (nghĩa là phông chữ phổ biến đến mức chúng được coi là có sẵn trên toàn cầu). Khả năng chỉ định tên của phông chữ được cài đặt cục bộ để tìm kiếm và sử dụng giúp bạn có thể tùy chỉnh phông chữ ngoài những điều cơ bản trong khi vẫn có thể làm như vậy mà không cần dựa vào kết nối Internet

  Quy tắc tại

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  5 có thể được sử dụng không chỉ ở cấp cao nhất của CSS mà còn bên trong bất kỳ

  FormatMIME typeTrueType

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  61OpenType

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  62Web Open Font Format_______763Web Open Font Format 2

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  64

  • Các phông chữ web phải tuân theo cùng một giới hạn tên miền (các tệp phông chữ phải nằm trên cùng một tên miền với trang sử dụng chúng), trừ khi các điều khiển truy cập HTTP được sử dụng để nới lỏng giới hạn này
  • Không thể khai báo

    src: local("Trickster"),
      url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
        format("opentype"), url("trickster-outline.woff") format("woff");
    

    5 trong bộ chọn CSS. Ví dụ: những điều sau đây sẽ không hoạt động

    src: local("Trickster"),
      url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
        format("opentype"), url("trickster-outline.woff") format("woff");
    

    1

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  3

  Ví dụ này chỉ định phông chữ có thể tải xuống để sử dụng, áp dụng nó cho toàn bộ nội dung của tài liệu

  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
  

  3

  Đầu ra của mã ví dụ này trông giống như vậy

  Trong ví dụ này, bản sao cục bộ của "Helvetica Neue Bold" của người dùng được sử dụng; . ttf" được sử dụng thay thế