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 sẽ hướng dẫn bạn cách hiển thị văn bản ngay lập tức bằng Font Face Observer (Trình quan sát phông chữ).

Thêm Trình quan sát mặ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 khi phông chữ tải. Tệp fontfaceobserver.js đã được lưu vào thư mục dự án, do đó, bạn không cần thêm riêng tệp này. Tuy nhiên, bạn vẫn cần thêm một thẻ tập lệnh cho tập lệnh đó.

  • Nhấp vào Remix để chỉnh sửa (Remix) để chỉnh sửa dự án.
  • Thêm 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 Trình quan sát phông chữ

Tạo đối tượng tiếp nhận dữ liệu

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 dưới đây sau tập lệnh fontfaceobserver.js. Thao tác này tạo ra các trình quan sát cho bộ phông chữ "Pacifico" và "Roboto":
  <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 không biết chắc mình cần tạo trình quan sát kiểu phông chữ nào, bạn chỉ cần tìm các phần khai báo font-family trong CSS. Truyền tên font-family của các nội dung khai báo này vào FontFaceObserver(). Bạn 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, vì vậy, bạn không cần phải khai báo FontFaceObservers cho các phông chữ này.

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

Mã để phát hiện hoạt động tải phông chữ sẽ 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ữ 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 hiệ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(){
  /* 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 thành phần gốc của tài liệu (thẻ <html>) sau khi cả hai phông chữ đã tải.

✔️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 sau khi á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 View App (Xem ứng dụng), sau đó nhấn vào Fullscreen toàn màn hình (Toàn màn hình).

Nếu trang có giao diện như thế này thì bạn đã triển khai thành công Font Face Observer và loại bỏ "Đèn flash của văn bản ẩn".

Tiêu đề bằng phông chữ viết tay.