Tránh ánh sáng nhấp nháy của văn bản ẩn

Katie Hempenius
Katie Hempenius
X

Lớp học lập trình này hướng dẫn bạn cách hiển thị văn bản ngay lập tức bằng Phông chữ Đối tượng tiếp nhận dữ liệu.

Thêm trình quan sát phông chữ

Font Face Observer (Trình quan sát phông chữ) là một tập lệnh để phát hiện thời điểm tải phông chữ. Chiến lược phát hành đĩa đơn fontfaceobserver.js tệp đã được lưu vào thư mục dự án, do đó bạn không cần thêm tệp này riêng biệt. Tuy nhiên, bạn cần thêm thẻ tập lệnh cho tệp đó.

  • Nhấp vào Phối lại để chỉnh sửa để có thể chỉnh sửa dự án.
  • Thêm một thẻ tập lệnh cho fontfaceobserver.js vào index.html:
  <div class="text">Some text.</div>
  <script src="fontfaceobserver.js" type="text/javascript"></script>
</body>

Sử dụng Font Face Observer

Tạo trình quan sát

Tạo trình quan sát cho từng bộ phông chữ được sử dụng trên trang.

  • Thêm tập lệnh sau đây sau tập lệnh fontfaceobserver.js. Việc này tạo nhóm quan sát viên "Pacifico" và "Roboto" họ phông chữ:
  <script src="fontfaceobserver.js" type="text/javascript"></script>
  <script type="text/javascript">
    const pacificoObserver = new FontFaceObserver('Pacifico');
    const robotoObserver = new FontFaceObserver('Roboto');
  </script>
<body>

Nếu bạn không chắc chắn mình cần tạo trình quan sát khuôn mặt phông chữ nào, chỉ cần tìm nội dung khai báo font-family trong CSS của bạn. Truyền tên font-family của các nội dung khai báo này cho FontFaceObserver() Không cần tạo trình quan sát phông chữ cho phông chữ dự phòng.

Ví dụ: nếu CSS của bạn là:

font-family: "Times New Roman", Times, serif;

bạn sẽ thêm FontFaceObserver('Times New Roman'). Times và serif là phông chữ dự phòng, do đó, bạn không cần khai báo FontFaceObservers cho chúng.

Phát hiện lượt tải phông chữ

Mã để phát hiện tải phông chữ có dạng như sau:

robotoObserver.load().then(function(){
  console.log("Hooray! Font loaded.");
});

robotoObserver.load() là một lời hứa sẽ phân giải khi phông chữ tải.

Trang web minh hoạ sử dụng hai phông chữ khác nhau, vì vậy, bạn cần dùng Promise.all() để đợi cho đến khi cả hai phông chữ đều tải xong.

  • Thêm lời hứa này vào tập lệnh của bạn, ngay bên dưới FontFaceObservers mà bạn vừa khai báo:
Promise.all([
  pacificoObserver.load(),
  robotoObserver.load()
]).then(function(){
  /* Do things */
});

✔️Nhận phòng

Tập lệnh của bạn bây giờ sẽ có dạng như sau:

<script type="text/javascript">
const pacificoObserver = new FontFaceObserver('Pacifico');
const robotoObserver = new FontFaceObserver('Roboto');

Promise.all([
  pacificoObserver.load(),
  robotoObserver.load()
]).then(function(){
  /* Do things */
});
</script>

Áp dụng lớp fonts-loaded

  • Thay thế nhận xét /* Do things */ trong tập lệnh bằng dòng sau:
document.documentElement.classList.add("fonts-loaded");

Thao tác này sẽ thêm lớp fonts-loaded vào phần tử gốc của tài liệu (phần tử <html>) sau khi cả hai phông chữ đều đã tải xong.

✔️Nhận phòng

Tập lệnh hoàn chỉnh của bạn sẽ có dạng như sau:

<script type="text/javascript">
  const pacificoObserver = new FontFaceObserver('Pacifico');
  const robotoObserver = new FontFaceObserver('Roboto');

  Promise.all([
    pacificoObserver.load(),
    robotoObserver.load()
  ]).then(function(){
    document.documentElement.className += " fonts-loaded";
  });
</script>

Cập nhật CSS

Trang của bạn phải được tạo kiểu để sử dụng phông chữ hệ thống ban đầu và phông chữ tuỳ chỉnh một lần đã áp dụng lớp fonts-loaded.

  • Cập nhật CSS:
.header {
html.fonts-loaded .header {
  font-family: 'Pacifico', cursive;
}

.text
html.fonts-loaded .text {
  font-family: 'Roboto', sans-serif;
}

Xác minh

  • Để xem trước trang web, hãy nhấn vào Xem ứng dụng. Sau đó nhấn Toàn màn hình toàn màn hình.

Nếu trang trông như thế này, thì bạn đã triển khai Phông chữ thành công Observer và gỡ bỏ " Flash of Hint Text" (Văn bản vô hình).

Một tiêu đề bằng phông chữ chữ thảo.