Tôi khuyên bạn nên sử dụng Google Fonts nếu bạn muốn tìm phông chữ mới, ngoài việc dễ dàng hơn và miễn phí, cũng có nhiều biến thể phông chữ có sẵn. Để biết thông tin, chủ đề này cũng sử dụng phông chữ từ Google Fonts.
Tôi cho rằng bạn hiểu cách tìm và sử dụng phông chữ trong Google Fonts.
Bước 1: Lấy mã nhúng (Cài đặt Phông chữ trên Blog)
Bước đầu tiên là lấy mã CSS @font-face' trong Google Fonts, ví dụ: Tôi sử dụng phông chữ sau để thêm văn bản tiếng Ả Rập vào bài đăng này:
<link href="https://fonts.googleapis.com/css2?family=Aref+Ruqaa&display=swap" rel="stylesheet">Mở url được đánh dấu ở trên trong trình duyệt của bạn, mã CSS @font-face' sẽ xuất hiện như bên dưới:
/* arabic */
@font-face {
font-family: 'Aref Ruqaa';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Aref Ruqaa Regular'), local('ArefRuqaa-Regular'), url(https://fonts.gstatic.com/s/arefruqaa/v10/WwkbxPW1E165rajQKDulIIIoVeo5.woff2) format('woff2');
unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;
}
/* latin */
@font-face {
font-family: 'Aref Ruqaa';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Aref Ruqaa Regular'), local('ArefRuqaa-Regular'), url(https://fonts.gstatic.com/s/arefruqaa/v10/WwkbxPW1E165rajQKDulIIcoVQ.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}Sao chép mã ở trên và dán vào mã CSS của bạn. Cách dễ dàng là dán đoạn mã trên ngay trước mã ]]></b:skin>.
Bước 2: Kích hoạt phông chữ
Thêm Phông chữ Mới
Sau khi thêm mã CSS ở trên, phông chữ đã được cài đặt trên blog của bạn, nhưng nó chưa được kích hoạt. Phông chữ trong hướng dẫn này sử dụng Aref Ruqaa vì vậy mã để kích hoạt nó như sau:
font-family: 'Aref Ruqaa', serif;Để sử dụng phông chữ, bạn có thể thêm style='font-family: 'Aref Ruqaa', serif;' vào bài viết của mình. Một ví dụ về cách viết là như thế này:
<p style='font-family: 'Aref Ruqaa', serif;'>السلام عليكم ورحمة الله وبركاته</p>Một cách dễ dàng hơn là thêm className mới để bạn không phải viết lại nhiều lần tất cả mã phông chữ, hãy thêm mã bên dưới vào mã CSS của bạn:
.arabicFont {font-family: 'Aref Ruqaa', serif;}Dựa trên mã CSS ở trên, hãy thêm class='arabicFont' để kích hoạt phông chữ mới trong bài viết của bạn. Ví dụ, như hình dưới đây:
<p class='arabicFont'>السلام عليكم ورحمة الله وبركاته</p>Không phải lúc nào cũng có thẻ <p>, bạn cũng có thể sử dụng các thẻ khác như <div> hoặc <span>.
Kết quả của thẻ ở trên sẽ như thế này:
السلام عليكم ورحمة الله وبركاته
Thay đổi phông chữ mặc định trong chủ đề
Cách thay thế thứ hai là bạn có thể thay thế phông chữ mặc định trong mẫu bằng một phông chữ mới, trung bình, hầu hết các mẫu đều có 2 phông chữ mặc định cho Heading (h1, h2, h3, h4, h5, h6) và Body.
Ví dụ: Tôi sẽ thay thế phông chữ nội dung mặc định trong mẫu bằng một phông chữ mới, những gì chúng tôi sẽ làm là tìm và thay thế mã bên dưới:
--font-body: 'Noto Sans', sans-serif ;Một số mẫu khác có thể sử dụng loại phông chữ khác cho Body, vì vậy chỉ cần tìm kiếm --font-body.
Thay thế nó bằng mã này:
--font-body: 'Aref Ruqaa', serif ;Trong bản cập nhật mới nhất, tất cả font-family: đã được thêm vào biến CSS, vì vậy bạn chỉ cần thay đổi một mã để thay thế toàn bộ phông chữ.
Tham khảo: jagodesain.com