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 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 mặt phông chữ) là một tập lệnh phát hiện thời điểm tải phông chữ. Tệp fontfaceobserver.js đã được lưu vào thư mục dự án, vì vậy, 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 phần tử này.

  • Nhấp vào Phối lại để chỉnh sửa để có thể 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 trình quan sát

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

  • Thêm tập lệnh sau vào sau tập lệnh fontfaceobserver.js. Thao tác này sẽ tạo trình quan sát cho các 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 chắc mình cần tạo trình quan sát phông chữ nào, bạn chỉ cần tìm phần khai báo font-family trong CSS. Truyền tên font-family của các phần khai báo này đến 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 khai báo FontFaceObservers cho các phông chữ này.

Phát hiện quá trình tải phông chữ

Mã để phát hiện quá trình 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ẽ giải quyết khi phông chữ tải.

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

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

✔️Xác nhận có mặt

Bây giờ, tập lệ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(){
  /* 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 (thẻ <html>) sau khi cả hai phông chữ đã tải.

✔️Xác nhận có mặt

Tập lệnh hoàn chỉnh 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 Xem ứng dụng. Sau đó, nhấn vào biểu tượng Màn hình toàn cảnh toàn màn hình.

Nếu trang có dạng như sau, thì tức là bạn đã triển khai thành công Font Face Observer và loại bỏ "Flash of Invisible Text" (Ánh sáng của văn bản vô hình).

Một tiêu đề được viết bằng phông chữ viết tay.