Các mẫu phông chữ hiển thị và thuộc tính hiển thị phông chữ của CSS

phông chữ css4

Tôi thực sự không thích sử dụng phông chữ web tùy chỉnh. Nhập phông chữ web tùy chỉnh trong lần truy cập đầu tiên ảnh hưởng tiêu cực đến hiệu suất của trang web. Nhưng là nhà phát triển và thiết kế web, chúng tôi luôn cố gắng tạo ra một trang web đẹp, hoạt động trơn tru và cho phép thử nhập phông chữ và giữ cân bằng giữa tính thẩm mỹ và hiệu suất. Thuộc tính hiển thị phông chữ của CSS mới giúp chúng tôi với nó.

Để bắt đầu, chúng ta sẽ hiểu cách kết nối các phông chữ và trình duyệt hiển thị chúng. Chúng tôi sẽ xem xét các mẫu như FOIT, FOUT, FOFT và sẽ biết cách sử dụng thuộc tính CSS mới. Tất cả các liên kết trên trang dưới cùng.

Làm thế nào để tải phông chữ tùy chỉnh chính xác?

Phông chữ tốt nhất là chúng tôi đã không kết nối. Nhiều phông chữ tích hợp tốt. Bên cạnh đó, có xu hướng sử dụng phông chữ hệ thống cho các thiết bị khác nhau.

Họ phông chữ chung này được dự định để cho phép hiển thị văn bản với phông chữ giao diện người dùng mặc định trên nền tảng mà tác nhân người dùng đang chạy. Bây giờ nó hoạt động như thế

font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira, Sans, Droid Sans, Helvetica Neue, sans-serif;

Hoặc chỉ sử dụng hệ thống-ui trong tương lai.

<div id="system-text" style="font-family: system-ui"></div>

Nếu chúng tôi cần tải phông chữ tùy chỉnh, chúng tôi sử dụng @ font-face . Khi trình duyệt nhìn thấy chỉ thị mặt phông chữ, nó không ngay lập tức tải mọi thứ, nhưng nó khác với hình nền. Nó phân tích tất cả phần còn lại của css và chờ thời điểm văn bản sẽ cần kết xuất phông chữ này và chỉ sau đó gửi yêu cầu cho các tệp. Lưu ý, Woff2 có khả năng nén tốt nhất, các định dạng khác là cần thiết để hỗ trợ trình duyệt cũ.

@font-face { 
    font-family: Output Sans;
    src: url(output-sans.woff2) format('woff2'), 
         url(output-sans.woff) format('woff'); 
}

Nhân tiện, mọi người đều thích phông chữ của Google để nhập dễ dàng nhất, nhưng nó không tốt vì chức năng nhập trang tải khối. @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i');
Chúng tôi có thể thêm tên địa phương. Trình duyệt sẽ cố gắng tìm nó cục bộ và chỉ sau đó sẽ tải phông chữ từ tệp.

src:
	local('Roboto Light'),
	local('Roboto-Light')
src:
	local('PT Sans'),
    local('PTSans-Regular')

Mẫu phông chữ web

1. Flash của văn bản vô hình

Nếu trình duyệt ngay lập tức thấy rằng nó cần một phông chữ, nó bắt đầu tải nó. Tại thời điểm này, hầu hết các trình duyệt ẩn văn bản và chờ trong khi phông chữ tải => Hiệu ứng của Flash Of Invisible Text.

Chrome, Firefox, Edge dừng chờ sau 3 giây và tải phông chữ tiếp theo trong danh sách. Đó là lý do tại sao cần có một danh sách dự phòng. Chrome trên các mạng chậm hoàn toàn không chờ đợi, và safari 9 và Android cũ chờ đến cuối cùng.

2. Flash của văn bản chưa được chỉnh sửa

IE hiển thị ngay phông chữ hệ thống tiếp theo trong khi chờ tải xuống. Khi phông chữ được tải, văn bản được đăng ký lại. nó được gọi là "Flash Of Unstyled Text" và hiệu ứng này được coi là thành công nhất. Ví dụ: Thư viện Phông chữ Quan sát cố gắng mô phỏng điều này và có các cài đặt khác nhau.

3. Flash Of Faux Text

Ý tưởng ở đây chỉ chờ biến thể La Mã của phông chữ tùy chỉnh tải và đặt văn bản theo đó ngay lập tức. Bạn buộc trình duyệt tạo "giả đậm" và "giả in nghiêng" khi cần, được thay thế bằng các phiên bản thực ngay khi chúng được tải xuống. Trong trường hợp này, văn bản sẽ đăng ký lại 2 lần. Một công cụ tốt để ngăn chặn nhảy nhấp nháy văn bản là trình so khớp kiểu Phông chữ .

Hiển thị phông chữ

Sử dụng hiển thị phông chữ, bạn có thể cho trình duyệt biết cách tải phông chữ. Ví dụ: chỉ định tầm quan trọng của phông chữ của bạn và khi hệ thống từ chối tải phông chữ trong trường hợp quá lâu. Bạn có thể thêm thuộc tính hiển thị phông chữ cho quy tắc khuôn mặt @ phông chữ của mình.

@font-face {
  font-family: 'Roboto';
  font-display: auto;
  src: local('Roboto'), url(https://github.com/abadkingdog/viblo/blob/master/fontDisplay/fonts/Roboto-Regular.woff2) format('woff2');
}

Giá trị

Chặn - một văn bản vô hình trong 3 giây Nếu bạn vẫn quyết định rằng phông chữ của bạn rất quan trọng, hãy sử dụng font-display: block. Thuộc tính này yêu cầu trình duyệt đợi một lúc (khoảng ba giây) để tải các phông chữ. Tại thời điểm này, người dùng sẽ không thấy bất kỳ văn bản nào. Sau ba giây, phông chữ tiếp theo sẽ được sử dụng. Từ giờ trở đi, bất kể trình duyệt tải phông chữ bao lâu, nó sẽ thay thế phông chữ được tải xuống gần đây vào bản sao lưu, ngay cả khi người dùng đã bắt đầu cuộn và đọc trang của bạn.

Hoán đổi - hiển thị phông chữ hệ thống ngay lập tức Nếu phông chữ tùy chỉnh của bạn cực kỳ quan trọng đối với thiết kế trang web, có một lựa chọn tốt hơn cho bạn. Hiển thị phông chữ: hoán đổi ngay lập tức sử dụng phông chữ dự phòng. Trong trường hợp này, ngay sau khi bạn tải xong phông chữ tùy chỉnh của mình, chỉ trong một giây hoặc 5, trình duyệt sẽ thay thế phông chữ dự phòng bằng phông chữ tùy chỉnh của bạn. Điều đáng chú ý là việc thay đổi phông chữ có thể gây khó chịu cho người dùng, đặc biệt nếu anh ta đã tập trung vào việc đọc.

Dự phòng - gần như ngay lập tức hiển thị hệ thống và sẽ không đợi lâu để tải xuống. Trình duyệt tự quyết định có tải phông chữ hay không. Nếu bạn đặt thuộc tính hiển thị phông chữ thành dự phòng, trình duyệt sẽ đợi ít hơn một giây trong khi phông chữ tùy chỉnh của bạn tải. Nếu phông chữ không tải tại thời điểm này, rollback sẽ được sử dụng. Trong trường hợp này, người dùng không phải nhìn lâu vào trang trống. Tất nhiên, điều hấp dẫn là phông chữ tùy chỉnh đẹp của bạn sẽ không được tải trên trang này và nó có thể làm hỏng giao diện trang web của bạn. Hiển thị phông chữ: dự phòng rất đơn giản: nếu phông chữ của bạn không tải đúng giờ, nó sẽ không được sử dụng.

Khả năng tương thích

Khả năng tương thích vẫn chưa tốt, Chrome đã hỗ trợ tài sản này kể từ phiên bản 60.

máy tính

Đặc tính

Trình duyệt Chrome

Cạnh

Firefox (tắc kè)

trình duyệt web IE

Opera

Safari

Hỗ trợ cơ bản

46.0 (46.0) [2]

Không có hỗ trợ

36 [1]

Di động

Đặc tính

Android

Chế độ xem web trên Android

Firefox di động (tắc kè)

Điện thoại di động IE

Opera di động

Safari di động

Chrome cho Android

Hỗ trợ cơ bản

Không có hỗ trợ

46.0 (46.0) [2]

37 [1]

59,0 [1]

Làm thế nào để chọn một giá trị?

Nếu hiệu suất là trên hết và phông chữ tùy chỉnh không thực sự làm phiền bạn, thì hiển thị phông chữ: dự phòng là lựa chọn của bạn. Nếu phông chữ tùy chỉnh là rất quan trọng, sau đó trao đổi và chặn cho bạn. Hãy nhớ rằng bất cứ phương pháp nào bạn sử dụng, trước tiên hãy kiểm tra mọi thứ thật tốt. Demo tại đây

Kết luận

Nó chỉ mô tả ngắn về cách các phông chữ web hoạt động bây giờ và cách nó sẽ hoạt động trong tương lai. Tôi khuyên bạn nên xem Dự thảo công việc đầu tiên của W3C [ 4 ] có nhiều thuộc tính mới đang chờ chúng ta trong tương lai như kéo dài phông chữ, điều chỉnh kích thước phông chữ, kích thước phông chữ tối thiểu và kích thước phông chữ và các kích thước khác. Tôi hy vọng một ngày nào đó nó sẽ làm các trang web của chúng tôi phản ứng nhanh và linh hoạt hơn.

Liên kết

PreviousKiểm soát web typography với việc hiển thị CSS font (ok)NextMột số mẹo tối ưu hóa HTML/CSS/JS đúng chuẩn

Last updated 4 years ago