Trong thập kỷ qua, đã có những bước tiến lớn trong việc cung cấp phông chữ tùy chỉnh cho người dùng với nhiều phông chữ được tải trước hơn trên thiết bị, khả năng tải phông chữ tùy chỉnh w…

< strong> Bạn đang xem: cách thêm phông chữ vào trang web css

Tác giả đã chọn Quỹ đa dạng trong công nghệ để nhận khoản đóng góp như một phần của chương trình Viết cho DO donate .

Giới thiệu

Bản sắc trực quan của một trang web chủ yếu được quyết định bởi hai nguyên tắc thiết kế: màu sắc và kiểu chữ. Trong thập kỷ qua, đã có những bước tiến lớn trong việc cung cấp phông chữ tùy chỉnh cho người dùng với nhiều phông chữ được tải trước hơn trên thiết bị, khả năng tải phông chữ tùy chỉnh với quy tắc @ font-face và sử dụng lưu trữ phông chữ dịch vụ. Các trình duyệt web cũng đã triển khai hỗ trợ cho các phông chữ thay đổi, là các tệp phông chữ đơn lẻ mà từ đó nhiều phông chữ có thể được nội suy, mang lại khả năng điều chỉnh và tùy chỉnh phông chữ ở mức độ cao.

Trong hướng dẫn này, bạn sẽ thử các ví dụ về tải phông chữ vào trang web của mình. Bạn sẽ sử dụng ngăn xếp phông chữ, thứ tự xếp hạng các phông chữ dựa trên tính khả dụng, để sử dụng các phông chữ có thể được cài đặt trên thiết bị của người dùng. Sau đó, bạn sẽ sử dụng dịch vụ lưu trữ phông chữ, Google Fonts , để tìm, chọn và tải các phông chữ tùy chỉnh lên trang của mình. Cuối cùng, bạn sẽ tải họ phông chữ tự lưu trữ bằng cách sử dụng quy tắc @ font-face , tiếp theo là phông chữ có thể tự lưu trữ.

Điều kiện tiên quyết

Thiết lập HTML và Tạo Ngăn xếp Phông chữ Ban đầu

Khái niệm về ngăn xếp phông chữ có từ thuở sơ khai trên web, khi chỉ có một số phông chữ đáng tin cậy mà người ta có thể cài đặt trên phần lớn máy tính. Thường có khả năng là phông chữ sẽ không có sẵn, vì vậy ngăn xếp phông chữ cung cấp một thứ tự phông chữ mà trình duyệt có thể cố gắng tìm và tải. Trong phần này, bạn sẽ tìm hiểu các nguyên tắc của một ngăn xếp phông chữ có khả năng phục hồi và những tùy chọn nào có sẵn cho phông chữ trên các thiết bị hiện đại. Nhưng trước tiên, bạn sẽ tạo HTML mẫu để minh họa các phông chữ.

Bắt đầu bằng cách mở index.html trong trình soạn thảo văn bản của bạn. Sau đó, thêm HTML sau vào tệp:

index.html

  

& lt ;!

doctype

html

& gt;

& lt;

html

& gt; < / p>

& lt;

đầu

& gt; < / p>

& lt;

meta

bộ ký tự

=

"

utf-8 < p class = "dấu chấm câu"> "

/ & gt;

& lt;

meta

tên

=

"

khung nhìn

"

nội dung

=

"

width = device-width, initial-scale = 1

"

/ & gt;

& lt;

title

& gt; < / p>

Trang gia đình phông chữ demo

& lt; /

title

& gt;

& lt;

liên kết

href

=

"

styles.css < p class = "dấu chấm câu"> "

rel

=

"

bảng định kiểu

"

/ & gt;

& lt; /

đầu

& gt;

& lt;

body

& gt; < / p>

& lt; /

body

& gt;

& lt; /

html

& gt;

Bên trong thẻ & lt; head & gt; , thẻ & lt; meta & gt; đầu tiên xác định bộ ký tự cho tệp HTML. Thẻ & lt; meta & gt; thứ hai xác định cách thiết bị di động sẽ hiển thị trang. Tiếp theo, thẻ & lt; title & gt; đặt tiêu đề cho trang. Cuối cùng, thẻ & lt; link & gt; tham chiếu đến tệp CSS mà bạn sẽ sử dụng sau này để tạo kiểu cho trang.

Tiếp theo, bên trong thẻ & lt; body & gt; , hãy thêm nội dung của trang. Nội dung này được gọi là nội dung phụ từ Cupcake Ipsum và nội dung này cung cấp văn bản để hiển thị giống như nội dung mà không thực sự nói bất cứ điều gì. Nội dung điền được đánh dấu trong khối mã sau. Bạn sẽ gặp phương pháp đánh dấu này trong suốt hướng dẫn khi mã được thêm và thay đổi:

index.html

  

& lt ;!

doctype

html

& gt;

& lt;

html

& gt; < / p>

& lt;

đầu

& gt; < / p>

& lt;

meta

bộ ký tự

=

"

utf-8 < p class = "dấu chấm câu"> "

/ & gt;

& lt;

meta

tên

=

"

khung nhìn

"

nội dung

=

"

width = device-width, initial-scale = 1

"

/ & gt;

& lt;

title

& gt; < / p>

Trang gia đình phông chữ demo

& lt; /

title

& gt;

& lt;

liên kết

href

=

"

styles.css < p class = "dấu chấm câu"> "

rel

=

"

bảng định kiểu

"

/ & gt;

& lt; /

đầu

& gt;

& lt;

body

& gt; < / p>

& lt;

chính

& gt; < / p>

& lt;

tiêu đề

& gt; < / p>

& lt;

div

class

=

"

content-width < p class = "dấu chấm câu"> "

& gt;

& lt;

h1

& gt; < / p>

Bánh pho mát dâu tây ngọt ngào

& lt; /

h1

< / p>

& gt;

& lt;

p

& gt; < / p>

& lt;

em

& gt;

Móng gấu bánh nướng xốp ngọt ngào

& lt; / em

& gt;

bánh rán chupa chups rượu cam tiramisu kẹo mía.

& lt; /

p

& gt;

& lt; /

div

& gt;

& lt; /

tiêu đề

& gt;

& lt;

div

class

=

"

content-width < p class = "dấu chấm câu"> "

& gt;

& lt;

p

& gt; < / p>

Bánh mì ngắn sô cô la caramels tootsie cuộn tiramisu ngọt tráng miệng bánh táo trái cây.

& lt;

strong

& gt; < / p>

Bánh sừng bò đóng băng chupa chups

& lt; /

strong

& gt;

bánh ngọt cuộn bánh tart trái cây soufflé jujubes. Bánh mì ngắn Brownie Tootsie Roll Ice Cream Pudding tráng miệng Marshmallow Sesame Snaps. Bánh pie jujubes chanh giọt mè snaps soufflé cookie jujubes wafer. Caramels kem trái cây bánh ngọt bánh pho mát sô cô la tootsie cuộn bánh marshmallow. Bánh kẹo bánh cupcake kẹo kéo bánh hạnh nhân bánh trái cây. Tootsie Roll Halvah Candy Cake Muffin Gummies. Kẹo bông kẹo bánh hạnh nhân bánh mè snaps bú mút bánh rán tráng miệng. Bánh quy macaroon kẹo dẻo bánh quy sô cô la bánh quy cà rốt kẹo dẻo những chú gấu.

& lt; /

p

< / p>

& gt;

& lt;

h2

& gt; < / p>

Kẹo bông gòn bánh donut kẹo que

& lt; /

h2 >

& gt;

& lt;

p

& gt; < / p>

& lt;

strong

& gt;

& lt;

em

& gt;

Bánh gừng hương cam tiramisu

& lt; /

em

& gt;

& gt;

& lt; /

mạnh mẽ

& gt;

bánh kẹo phồng. Jujubes tootsie roll muffin bột bánh gừng. Carrot cake halvah sô cô la thanh tart đường mận đường mận bánh ngọt. Thạch topping thạch đậu kẹo mía bánh pho mát bánh gừng bánh mè rắc mận đường. Pie Cheesecake Pudding Jelly Brownie Jelly Beans Halvah. Bánh phô mai bột kem cà rốt bánh bông lan móng gấu.

& lt; /

p

< / p>

& gt;

& lt;

p

& gt; < / p>

& lt;

em

& gt;

Jelly-o jelly-o thạch

& lt; /

em

& gt;

bánh sừng bò hình kẹo mút. Carrot cake tart danish drag Gingerbread macaroon. Bánh quy kẹo bông đường hoa mận

& lt;

strong

& gt;

bột bánh trái cây cam thảo

& lt; /

& gt;

. Shortbread candy pie tart pudding. Sesame Snaps Bear Claw Tart Tiramisu Donut Chocolate Cake. Tiramisu cheesecake bánh sô cô la tráng miệng món tráng miệng kẹo kẹo canes bánh táo marshmallow. Bánh ngọt Croissant Pudding Toffee Tootsie Roll Gummies Tart Pastry Pie. Kẹo táo pie cake wafer tootsie roll tart icing Half

& gt;

& lt;

h3

& gt; < / p>

Gingerbread Gummy Bears

& lt; /

h3

< / p>

& gt;

& lt;

p

& gt;

& lt;

em

& gt;

Bánh ngọt Tiramisu < p class = "token tag">

& lt; /

em

& gt; < / p>

Caramels Kem Topping Đan Mạch. Kẹo tiramisu cam thảo thạch-o kẹo bánh hạnh nhân bánh cupcake topping. Gummy Bears Jujubes Carrot Cake Shortbread Sesame Snaps Marshmallow Danish Pudding Cotton Candy.

& lt;

strong

& gt; < / p>

Cake jujubes biscuit

& lt; / < / p> strong

& gt;

phủ trên cùng kẹo bánh hạnh nhân bánh táo cuộn ngọt ngào. Bear Claw Donut Bear Claw Candy Caramels Halvah Gummy Bears. Gummy gấu bánh táo nhân thạch-o donut mè chụp bánh hạnh nhân đóng băng. P>

& gt;

& lt;

p

& gt; < / p>

& lt;

strong

& gt;

& lt;

em

& gt;

Candy Sucks Chups

& lt; /

em

& gt;

& gt;

& lt; /

strong

& gt;

bánh tráng miệng bánh rán. Bánh sừng bò tráng miệng bánh nướng xốp caramen ngọt ngào. Bột sô cô la kẹo que kem kẹo bánh kẹo bánh nướng xốp kẹo bông gòn. Fruitcake topping mút chups kẹo bơ cứng thạch-o halvah. Kẹo Soufflé kẹo bơ cứng kẹo cao su fruitcake bánh yến mạch bánh sô cô la. Món tráng miệng Cupcake Cheesecake Sweet Roll Bear Claw. Marshmallow halvah bánh quy móng vuốt gấu dragee bánh hạnh nhân chanh giọt thạch

& gt;

& lt; /

div

& gt;

& lt; /

chính

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;

Nội dung phụ chứa một số phần tử được sử dụng để cung cấp các kiểu phông chữ khác nhau. Thẻ & lt; strong & gt; theo mặc định sẽ làm cho nội dung của nó in đậm, thẻ & lt; em & gt; sẽ in nghiêng nội dung của nó và các thẻ tiêu đề sẽ tăng kích thước phông chữ và in đậm nội dung của họ.

Tiếp theo, quay lại trình soạn thảo văn bản của bạn và tạo tệp styles.css trong cùng thư mục với index.html . Sau đây là tệp bạn đã tham chiếu trong phần tử & lt; head & gt; của index.html . Trong tệp styles.css , hãy thêm mã sau:

styles.css

  

body

{

margin

:

0

;

background-color

:

hsl

(

0

,

0%

,

100%

)

;

color

:

hsl

(

0

,

0%

,

10%

) < / p>

;

line-height

:

1.5

;

}

. content-width

{

max-width

:

70ch

;

width

:

calc

(

100% - 4rem

)

;

margin

:

0 auto

;

}

main

{

margin-bottom

:

4rem

;

}

header

{

margin-bottom

:

4rem

;

padding

:

2rem 0

;

background-color

:

hsl

(

280

,

50%

,

40%

)

;

border-bottom

:

4px solid

hsl

(

300

,

50%

,

50%

)

;

color

:

hsl

(

300

,

50%

,

90%

) < / p>

;

}

tiêu đề p

{

color

:

hsl

(

300

,

50%

,

85%

) < / p>

;

}

h1, h2, h3

{

margin

:

0

;

line-height

:

1,25

;

}

h2, h3

{

color

:

hsl

(

280

,

50%

,

40%

) < / p>

}

Những kiểu này tạo ra kiểu trực quan tổng thể của trang. Phần đầu có nền màu tím với h1 p bên trong có màu tím nhạt. Các bộ chọn main .content-width tạo bố cục của trang và các bộ chọn body và tiêu đề cung cấp một số kiểu chữ bằng cách đặt < các giá trị code> line-height , color margin .

Lưu các thay đổi của bạn vào styles.css , sau đó mở trình duyệt web của bạn. Mở index.html trong trình duyệt bằng cách kéo tệp vào cửa sổ trình duyệt hoặc sử dụng tùy chọn Mở tệp của trình duyệt. Trình duyệt sẽ hiển thị mã HTML và CSS để tạo ra một trang như hình sau:

Khối lớn màu tím với văn bản màu trắng ở phông chữ serif bên trong. Bên dưới có một số đoạn văn bản có chân màu xám đậm với các tiêu đề serif đậm màu tím.

Văn bản của tệp index.html trong trình duyệt của bạn sẽ sử dụng phông chữ mặc định cục bộ của trình duyệt. Trong hầu hết các trường hợp, đây sẽ là phông chữ serif như Times New Roman . Cách hiệu quả nhất để tùy chỉnh phông chữ là sử dụng phông chữ đã có trên máy tính của người dùng cuối. Sử dụng phông chữ cục bộ giúp trình duyệt tải xuống và xử lý các tệp lớn.

Ngày nay, thường có vài chục phông chữ cục bộ để bạn lựa chọn; chúng được gọi là phông chữ hệ thống. Cả Microsoft Apple đều giữ một danh sách cập nhật các phông chữ đi kèm với hệ thống của họ.

Để bắt đầu sử dụng phông chữ hệ thống được cài đặt sẵn, hãy quay lại styles.css trong trình soạn thảo văn bản của bạn. Trong bộ chọn body , hãy thêm thuộc tính font-family và đặt giá trị của nó thành danh sách phông chữ được phân tách bằng dấu phẩy được gọi là ngăn xếp phông chữ:

styles.css

  

body

{

margin

:

0

;

background-color

:

hsl

(

0

,

0%

,

100%

)

;

color

:

hsl

(

0

,

0%

,

10%

) < / p>

;

line-height

:

1.5

;

font-family

:

"PT Sans"

,

Calibri

,

Tahoma

,

sans-serif

;

}

...

Trình duyệt sẽ cố gắng tải tuần tự các phông chữ cục bộ vào ngăn xếp phông chữ cho đến khi thành công. Đối với ngăn xếp phông chữ này, phông chữ đầu tiên cần thử là "PT Sans" , nằm trong dấu ngoặc kép vì nó là tên phông chữ nhiều từ. PT Sans là một phông chữ miễn phí từ ParaType được cài đặt sẵn trên hệ điều hành của Apple. Phông chữ tiếp theo là Calibri , theo sau là một dấu phẩy khác và Tahoma . Calibri là một phông chữ của Microsoft được cài đặt trên các phiên bản Windows gần đây và Tahoma là một phông chữ khác của Microsoft đã có mặt trên hệ điều hành Apple hơn một thập kỷ. < / p>

Phông chữ cuối cùng là giá trị khoảng cách giữa tên chung sans-serif . Nếu không có phông chữ nào trong số ba phông chữ trước đó, thì phông chữ sans-serif mặc định của trình duyệt sẽ được sử dụng, chẳng hạn như Helvetica hoặc Arial . < / p>

Lưu các thay đổi của bạn vào Styles.css và sau đó làm mới Index.html trong trình duyệt của bạn. Hệ điều hành của bạn và các phông chữ được cài đặt sẽ xác định phông chữ nào được hiển thị và cách nó được hiển thị. Hình ảnh sau đây cho thấy cách phông chữ PT Sans xuất hiện khi được tải trong Firefox trên macOS:

Khối màu tím lớn với văn bản màu trắng trong phông chữ sans-serif bên trong. Dưới đây là một số đoạn văn bản sans-serif màu xám đậm với các tiêu đề sans-serif đậm màu tím.

Họ phông chữ bao gồm tất cả các biến thể trọng lượng và kiểu dáng của một phông chữ nhất định. Các gia đình có thể bao gồm nhiều trọng lượng và kiểu bổ sung để thay đổi độ mỏng, dày và nghiêng của phông chữ.

Thuộc tính font-style xác định độ nghiêng của phông chữ. Giá trị phổ biến nhất là in nghiêng ; tuy nhiên, một số phông chữ hỗ trợ giá trị xiên , giá trị này chấp nhận giá trị độ tùy chọn để biểu thị độ dốc của đường xiên

Thuộc tính font-weight có hai giá trị được đặt tên được xác định là normal bold , nhưng là cách linh hoạt và dễ đoán nhất để xác định giá trị này là sử dụng một số trọng lượng. Các giá trị số trọng lượng thường được xác định theo gia số 100 từ 100 đến 900, với 100 là trọng lượng mỏng và 900 là trọng lượng dày. Nếu trình duyệt không thể tìm thấy phông chữ tương ứng với trọng lượng đã chỉ định, trình duyệt sẽ tìm kích thước có sẵn gần nhất.

Để đặt một số kiểu phông chữ cơ sở mới cho trang này trong suốt hướng dẫn, hãy truy cập styles.css trong trình soạn thảo văn bản của bạn. Sau đó, tạo bộ chọn phần tử cho từng phần tử h1 , h2 , h3 p . Bên trong mỗi bộ chọn, thêm CSS được đánh dấu từ khối mã sau để tăng kích thước phông chữ và nhấn mạnh các tiêu đề:

styles.css

  

. h2, h3

{

color

:

hsl

(

280

,

50%

,

40%

) < / p>

}

h1

{

font-size

:

3rem

;

font-weight

:

100

;

}

h2

{

font-size

:

2rem

;

font-weight

:

200

;

}

h3

{

font-size

:

1.75rem

;

font-style

:

italic

;

font-weight

:

200

;

}

p

{

font-size

:

1.125rem

;

}

h1 ở đây được đặt thành font-size của 3rem , tương đương với 48px , với font-weight mỏng là 100 . Sau đó, h2 được đặt thành 2rem , tương đương với 32px font-weight của 200 . Tiếp theo, h3 được đặt thành font-weight giống nhau và font-size nhỏ hơn một chút như h2 , nhưng đạt được thuộc tính font-style được thêm vào được đặt thành italic . Cuối cùng, bộ chọn phần tử p nâng cấp font-size chuẩn thành 1.125rem , bằng với 18px trong trường hợp này. Các điều chỉnh về kiểu dáng tổng thể của văn bản này sẽ không thay đổi khi bạn thay đổi phông chữ được sử dụng trong mỗi phần.

Lưu các thay đổi vào styles.css , sau đó quay lại trình duyệt của bạn và làm mới index.html . Kích thước văn bản tổng thể đã tăng lên, với các kiểu tiêu đề được phân biệt nhiều hơn với nhau. Hình ảnh sau đây cho thấy điều này sẽ xuất hiện như thế nào trong trình duyệt:

Khối màu tím lớn với văn bản màu trắng ở phông chữ sans-serif bên trong. Dưới đây là một số đoạn văn bản sans-serif có màu xám đậm với các tiêu đề sans-serif màu tím. Kích thước phông chữ nhìn chung đã tăng lên.

Trong phần này, bạn đã sử dụng ngăn xếp phông chữ để tải một loạt phông chữ có thể có trên trang theo thứ tự được xếp hạng. Bạn cũng đã tìm hiểu về các biến thể có thể có của một họ phông chữ với các thuộc tính font-weight font-style . Trong phần tiếp theo, bạn sẽ sử dụng phông chữ từ dịch vụ lưu trữ phông chữ.

Tìm và Tải Tệp Phông chữ từ Dịch vụ Được Lưu trữ

Dịch vụ phông chữ được lưu trữ là cách phổ biến và hiệu quả để tìm kiếm và cung cấp phông chữ tùy chỉnh cho trang web. Các dịch vụ như Google Fonts , Adobe Fonts (trước đây là Typekit) và Typography.com cung cấp một thư viện lớn gồm các phông chữ chất lượng cao mà khách hàng sẽ tạm thời tải xuống khi xem trang của bạn. Điều này có nghĩa là bạn không còn phải lo lắng về phông chữ nào trên hệ thống của khách hàng.

Mỗi dịch vụ lưu trữ phông chữ có quy trình tải phông chữ riêng và trong nhiều trường hợp, có một chi phí liên quan. Đối với phần này, bạn sẽ tìm và tải các phông chữ từ dịch vụ của Google, vì dịch vụ này lưu trữ miễn phí các phông chữ có giấy phép hạn chế và mã nguồn mở.

Để bắt đầu, hãy mở fonts.google.com . Tìm kiếm phông chữ có tên “Open Sans” bằng thanh tìm kiếm ở đầu trang. Kết quả tìm kiếm sẽ liệt kê cụm từ phù hợp, là liên kết đưa bạn đến trang Google Fonts Open Sans . Trên trang này, có một danh sách các kiểu phông chữ. Mỗi tổ hợp kiểu và trọng lượng phông chữ này là một tệp phông chữ duy nhất mà trình duyệt sẽ tải xuống.

Lưu ý: Mỗi font-weight font-style sẽ cần được chọn dựa trên nhu cầu, thay vì chọn tất cả. Nhiều phông chữ được chọn hơn có nghĩa là cần phải tải xuống nhiều phông chữ hơn, do đó làm tăng thời gian tải trang web. Điều quan trọng là chỉ tải trọng lượng và kiểu phông chữ được sử dụng trong thiết kế của bạn.

Đối với thiết kế này, hãy chọn Độ nghiêng 300 , Độ nghiêng 300 nhẹ , Độ nghiêng 400 thông thường, Độ nghiêng 400 Thông thường , In đậm 700 in nghiêng 700 . Hình ảnh sau đây cho biết lựa chọn này sẽ trông như thế nào trong Google Fonts:

Chế độ xem giao diện Phông chữ của Google với danh sách các kiểu và trọng lượng phông chữ ở bên trái. Ở bên phải là danh sách các kiểu và trọng lượng phông chữ đã chọn với văn bản mã bên dưới.

Tiếp theo, sao chép các thẻ & lt; link & gt; cần thiết để tải các tệp từ dịch vụ Google Fonts. Để làm điều đó, hãy chọn tùy chọn & lt; liên kết & gt; thay vì tùy chọn @import làm cách tải tệp trong giao diện Phông chữ của Google . Sao chép chuỗi thẻ & lt; link & gt; được trình bày. Sau đó, quay lại index.html trong trình soạn thảo văn bản của bạn. Đi vào bên trong phần tử & lt; head & gt; và sau khi tải thẻ & lt; link & gt; styles.css , dán & lt; liên kết & gt;các thẻ từ Google Fonts. HTML được đánh dấu trong khối mã sau đây cho biết nơi thêm mã đã sao chép:

index.html

  

& lt ;!

doctype

html

& gt;

& lt;

html

& gt; < / p>

& lt;

đầu

& gt; < / p>

...

& lt;

liên kết

href

=

"

styles.css < p class = "dấu chấm câu"> "

rel

=

"

bảng định kiểu

"

/ & gt;

& lt;

liên kết

rel

=

"

kết nối trước

href

=

"

https://fonts.googleapis.com

"

& gt;

& lt;

liên kết

rel

=

"

kết nối trước

href

=

"

https://fonts.gstatic.com

"

nguồn gốc chéo

& gt;

& lt;

liên kết

href

=

"

https: // font.googleapis.com/css2?family=Open+Sans:ital,wght@0.300;0.400;0.700;1.300;1.400;1.700&display=swap

"

rel

=

"

biểu định kiểu

"

& gt;

& lt; /

đầu

& gt;

& lt;

body

& gt; < / p>

...

& lt; /

body

& gt;

& lt; /

html

& gt;

Hai phần tử & lt; link & gt; đầu tiên thực hiện một tác vụ được gọi là kết nối trước, nhiệm vụ này yêu cầu trình duyệt ưu tiên kết nối web bên ngoài. Đổi lại, hai phần tử & lt; link & gt; này chuẩn bị cho trình duyệt tải tệp CSS và tệp phông chữ từ & lt; link & gt; thứ ba càng sớm càng tốt>

Bây giờ, phông chữ đã sẵn sàng để trình duyệt tải nó vào trang, tiếp theo, bạn cần áp dụng kiểu phông chữ để văn bản được hiển thị bằng phông chữ đó

Lưu các thay đổi của bạn vào Index.html , sau đó quay lại styles.css trong trình soạn thảo văn bản của bạn. Trong bộ chọn body , hãy chuyển đến thuộc tính font-family . Thêm giá trị bằng tên phông chữ "Open Sans" trong dấu ngoặc kép trước phông chữ "PT Sans" , theo sau là dấu phẩy. CSS được đánh dấu trong khối mã sau đây cho biết vị trí đặt phông chữ mới trong ngăn xếp phông chữ:

styles.css

  

body

{

margin

:

0

;

background-color

:

hsl

(

0

,

0%

,

100%

)

;

color

:

hsl

(

0

,

0%

,

10%

)

; < / p>

line-height

:

1.5

;

font-family

:

"Open Sans"

,

"PT Sans"

,

Calibri

,

Tahoma

,

sans-serif

;

}

...

Bằng cách thêm Open Sans vào đầu ngăn xếp phông chữ, trình duyệt sẽ dự phòng về phông chữ cục bộ có sẵn tiếp theo nếu trình duyệt không thể tải tệp từ Google. Điều quan trọng là luôn có ngăn xếp phông chữ ít nhất là hai, với phông chữ cuối cùng trong ngăn xếp là sans-serif , serif , monospace hoặc một giá trị được đặt tên khác giống với phông chữ dự định một cách hiệu quả nhất.

Lưu các thay đổi của bạn vào styles.css và mở index.html trong trình duyệt web. Văn bản trên trang bây giờ sẽ hiển thị bằng phông chữ Open Sans được tải từ Google Fonts. Thay vào đó, văn bản có font-weight được đặt thành 100 200 sẽ sử dụng 300 vì đó là văn bản gần nhất có sẵn . Hình ảnh sau minh họa cách điều này sẽ xuất hiện trong trình duyệt:

Khối màu tím lớn với văn bản màu trắng ở bên trong phông chữ sans-serif. Dưới đây là một số đoạn văn bản sans-serif có màu xám đậm với các tiêu đề sans-serif mỏng màu tím.

Trong phần này, bạn đã tải một họ phông chữ từ Google Fonts. Bạn đã biết cách mỗi trọng lượng và kiểu phông chữ là một tệp khác nhau được tải từ dịch vụ và rằng số lượng các biến thể được tải có thể ảnh hưởng đến hiệu suất trang web. Trong phần tiếp theo, bạn sẽ tải các phông chữ bằng cách viết quy tắc @ font-face của riêng bạn để điền vào các tệp phông chữ tự lưu trữ.

Đang tải Phông chữ Tự Lưu trữ bằng @ font-face

Phông chữ tự lưu trữ là các tệp phông chữ được lưu trữ trên máy chủ của bạn cùng với các thành phần web khác, chẳng hạn như tệp HTML và CSS. Một lý do phổ biến để xem xét việc tự lưu trữ tệp phông chữ của bạn là khi bạn muốn sử dụng phông chữ không được cung cấp bởi dịch vụ lưu trữ. Khi tự lưu trữ, có nhiều quyền kiểm soát hơn đối với cách các phông chữ liên quan với nhau và chúng được đặt tên như thế nào, bạn có thể đặt điều này thông qua định nghĩa của quy tắc @ font-face . Trong phần này, bạn sẽ viết các quy tắc @ font-face của riêng mình và tải một nhóm phông chữ vào trang web của bạn.

Đối với phần này, bạn sẽ cần tải xuống tệp zip ví dụ có chứa các phông chữ nguồn mở . Bạn có thể tải xuống phần mềm này thông qua trình duyệt của mình hoặc sử dụng lệnh curl sau:

  
  1. curl

    -sL https://assets.digitalocean.com/articles/68060 /fonts.zip -o fonts.zip

Khi bạn đã tải xuống tệp, hãy giải nén thư mục font có trong tệp zip và đặt nó vào cùng thư mục với các kiểu index.html .css trên máy tính của bạn. Trên Linux, bạn có thể thực hiện việc này từ dòng lệnh với lệnh giải nén sau:

  
  1. giải nén

    font.zip

Tiếp theo, mở index.html trong trình soạn thảo văn bản của bạn. Vì bạn sẽ tải một phông chữ cục bộ từ tệp zip, nên bạn có thể xóa mã Phông chữ của Google. Trong phần này, bạn sẽ tải các tệp phông chữ từ tệp styles.css hiện có của mình. Đảm bảo nội dung của phần tử & lt; head & gt; của bạn được thiết lập giống như khối mã sau:

index.html

  

& lt ;!

doctype

html

& gt;

& lt;

html

& gt; < / p>

& lt;

đầu

& gt; < / p>

& lt;

meta

bộ ký tự

=

"

utf-8 < p class = "dấu chấm câu"> "

/ & gt;

& lt;

meta

tên

=

"

viewport

"

content

=

"

width = device-width, initial-scale = 1

"

/ & gt;

& lt;

title

& gt; < / p>

Trang gia đình phông chữ demo

& lt; /

title

& gt;

& lt;

liên kết

href

=

"

styles.css < p class = "dấu chấm câu"> "

rel

=

"

bảng định kiểu

"

/ & gt;

& lt; /

đầu

& gt;

& lt;

body

& gt; < / p>

...

& lt; /

body

& gt;

& lt; /

html

& gt;

Lưu các chỉnh sửa của bạn vào index.html , sau đó mở styles.css trong trình soạn thảo văn bản của bạn.

Bạn có thể sử dụng quy tắc @ font-face để tải phông chữ tùy chỉnh trên trang web. Lịch sử tải các phông chữ tùy chỉnh đã dẫn đến một phương pháp kết hợp để hỗ trợ nhiều trình duyệt nhất. Không giống như các quy tắc at khác, như @media hoặc @supports , quy tắc @ font-face không có đối số bổ sung. Bên trong khối quy tắc, chỉ một số thuộc tính được chấp nhận. Quan trọng nhất là font-family , mô tả tên mà trình duyệt sẽ sử dụng để tham chiếu và tải các tệp phông chữ thích hợp. Sau đó, thuộc tính src tham chiếu đến vị trí của các tệp phông chữ. Để hỗ trợ các phiên bản của Internet Explorer trước phiên bản 9, cần có hai thuộc tính src , với thuộc tính đầu tiên chỉ tham chiếu đến tệp phông chữ .eot định dạng. Thuộc tính src thứ hai sau đó sẽ là danh sách các định dạng tệp phông chữ được phân tách bằng dấu phẩy. Phiên bản trình duyệt sẽ chọn định dạng thích hợp mà nó hỗ trợ.

Để bắt đầu sử dụng quy tắc @ font-face , hãy mở styles.css trong trình soạn thảo văn bản của bạn. Ở đầu tệp, trước bộ chọn body , hãy tạo quy tắc @ font-face sau:

styles.css

  

@ font-face

{

font-family

:

"Fira Sans"

;

src

:

url

(

'font / fira / eot / FiraSans-Regular.eot'

)

;

src

:

url

(

'font / fira / eot / FiraSans-Regular.eot'

)

định dạng

(

'nhúng- opentype '

)

,

url

(

'font / fira / woff2 / FiraSans-Regular.woff2 '

)

định dạng

(

'woff2'

)

,

url

(

'font / fira / woff / FiraSans-Regular.woff '

)

định dạng

(

'gâu gâu'

)

,

url

(

'font / fira / woff2 / FiraSans-Regular.ttf '

)

định dạng

(

'truetype'

)

;

}

body

{

...

}

...

Bên trong quy tắc này, bạn đã thêm thuộc tính font-family với giá trị "Fira Sans" trong dấu ngoặc kép. Vì mã này đang xác định một font-family tổng thể, chỉ nên sử dụng một tên phông chữ. Danh sách định dạng phông chữ được phân tách bằng dấu phẩy cho src là hai phần. Đầu tiên là url () , giống như thuộc tính background-image , cung cấp đường dẫn đến định dạng tệp trên máy chủ. Sau đó, format () giải thích loại tệp nào đang được tham chiếu, cho phép trình duyệt chọn định dạng được hỗ trợ.

Thư mục fira bên trong thư mục font chứa bốn thư mục với các định dạng tệp cụ thể của phông chữ Fira Sans. EOT là viết tắt của Encapsulated OpenType, một định dạng được Microsoft phát triển cho Internet Explorer để tải các phông chữ tùy chỉnh. TTF là viết tắt của TrueType Font và là một định dạng phông chữ cũ hơn ban đầu không được phát triển cho web. Định dạng WOFF và WOFF2 là viết tắt của Định dạng Phông chữ Mở trên Web, với “2” biểu thị phiên bản thứ hai của định dạng. Phần lớn các trình duyệt hiện đại hỗ trợ TTF, WOFF và WOFF2 như nhau. Để tạo quy tắc @ font-face bao gồm các định dạng trình duyệt nhất có thể, bạn đã cung cấp nhiều nguồn cho phông chữ của mình. EOT được tham chiếu trong cả hai thuộc tính src vì phiên bản 9 trở lên của Internet Explorer thay vào đó sử dụng định dạng được phân tách bằng dấu phẩy.

Bây giờ bạn đã tạo quy tắc @ font-face cho Fira Sans, hãy chuyển đến thuộc tính font-family trong bộ chọn body . Trong giá trị cho font-family , hãy thay thế "Open Sans" bằng "Fira Sans" để sử dụng phông chữ tự lưu trữ trên trang của bạn . Phần được đánh dấu của khối mã sau đây thể hiện sự thay đổi này:

styles.css

  

@ font-face

{

...

}

body

{

margin

:

0

;

background-color

:

hsl

(

0

,

0%

,

100%

)

;

color

:

hsl

(

0

,

0%

,

10%

) < / p>

;

line-height

:

1.5

;

font-family

:

"Fira Sans"

,

"PT Sans"

,

Calibri

,

Tahoma

,

sans-serif

;

}

...

Mặc dù các phông chữ đang được tải từ cùng một nơi với tệp styles.css index.html , điều quan trọng là phải giữ một chồng phông chữ thay thế . Có nhiều lý do không xác định khiến phông chữ tự lưu trữ có thể không tải và nếu trình duyệt gặp sự cố, một bản sao lưu đầy đủ sẽ giúp duy trì vẻ thẩm mỹ tương tự cho trang web của bạn.

Lưu các thay đổi của bạn vào styles.css và mở index.html trong trình duyệt web. Lưu ý rằng các phiên bản in đậm và in nghiêng của phông chữ trông không đúng lắm. Điều này là do trong @ font-face chỉ quy tắc trọng lượng phông chữ và tệp kiểu thông thường được tải và sử dụng. Khi trình duyệt cần áp dụng kiểu chữ đậm hoặc kiểu nghiêng cho phông chữ, nhưng thiếu tệp phông chữ thích hợp, trình duyệt sẽ tạo biến thể cần thiết. Dạng phông chữ bị thay đổi này được gọi là chữ in đậm giả và chữ nghiêng giả. Faux bold được tạo ra bằng cách thêm một nét vào phông chữ, điều này thường tạo ra một khoảng cách rộng hơn giữa các ký tự có thể ảnh hưởng đến bố cục dự định của bạn. Chữ nghiêng giả được tạo ra bằng cách nghiêng phông chữ, thường không sử dụng khoảng trắng cũng như chữ nghiêng thực sự.

Hình ảnh sau đây cho thấy cách các kiểu in nghiêng giả, in nghiêng và in nghiêng đậm xuất hiện trong trình duyệt:

Ba dòng văn bản, dòng đầu tiên có kiểu in đậm được tạo, dòng thứ hai có kiểu in nghiêng đã tạo và dòng cuối cùng có kiểu in nghiêng đậm đã tạo.

Để cung cấp cho trình duyệt các biến thể thích hợp của họ phông chữ, cần cung cấp thêm chi tiết trong quy tắc @ font-face và bạn cần tạo thêm quy tắc để tải các biến thể bổ sung tệp.

Quay lại styles.css trong trình soạn thảo văn bản của bạn. Trong quy tắc @ font-face , thêm thuộc tính font-weight font-style sau src tài sản:

styles.css

  

@ font-face

{

font-family

:

"Fira Sans"

;

src

:

url

(

'font / fira / eot / FiraSans-Regular.eot'

)

;

src

:

url

(

'font / fira / eot / FiraSans-Regular.eot'

)

định dạng

(

'nhúng- opentype '

)

,

url

(

'font / fira / woff2 / FiraSans-Regular.woff2 '

)

định dạng

(

'woff2'

)

,

url

(

'font / fira / woff / FiraSans-Regular.woff '

)

định dạng

(

'gâu gâu'

)

,

url

(

'font / fira / woff2 / FiraSans-Regular.ttf '

)

định dạng

(

'truetype'

)

;

font-weight

:

bình thường

;

font-style

:

bình thường

;

}

...

Tại đây, bạn đặt giá trị cho cả hai thuộc tính thành normal . Đối với font-weight , giá trị normal tương đương với giá trị số 400 . Các thuộc tính này yêu cầu trình duyệt áp dụng các tệp phông chữ này cho các biến thể bình thường. Do đó, tệp phông chữ FiraSans-Regular sẽ được sử dụng khi văn bản cần có trọng lượng và kiểu dáng bình thường.

Tiếp theo, để cung cấp các biến thể cần thiết để sửa lỗi giả in đậm và giả nghiêng, hãy thêm các quy tắc @ font-face khác để tham chiếu từng font-weight kết hợp font-style :

styles.css

 

@ font-face

{

font-family

:

"Fira Sans"

;

src

:

url

(

'fonts / fira / eot / FiraSans-Regular.eot'

)

;

src

:

url >

(

'font / fira / eot / FiraSans-Regular.eot'

)

định dạng

(

'được nhúng - opentype '

)

,

url

(

'font / fira / woff2 / FiraSans-Regular.woff2 '

)

định dạng

(

'woff2'

)

,

url

(

'font / fira / woff / FiraSans-Regular.woff '

)

định dạng

(

'gâu gâu'

)

,

url

(

'font / fira / woff2 / FiraSans-Regular.ttf '

)

định dạng

(

'truetype'

)

;

font-weight

:

bình thường

;

font style

:

bình thường

;

}

@ font-face

{

font-family

:

"Fire Sans"

;

src

:

url >

(

'font / fira / eot / FiraSans-Italic.eot'

)

;

src

:

url >

(

'font / fira / eot / FiraSans-Italic.eot'

)

định dạng

(

'được nhúng - opentype '

)

,

url

(

'font / fira / woff2 / FiraSans-Italic.woff2 '

)

định dạng

(

'woff2'

)

,

url

(

'font / fira / woff / FiraWithout-Italic.woff '

)

định dạng

(

'gâu gâu'

)

,

url

(

'font / fira / woff2 / FiraSans-Italic.ttf '

)

định dạng

(

'truetype'

)

;

font-weight

:

bình thường

;

font style

:

italic

;

}

@ font-face

{

font-family

:

"Fire Sans"

;

src

:

url >

(

'font / fira / eot / FiraSans-Bold.eot'

)

;

src

:

url >

(

'font / fira / eot / FiraSans-Bold.eot'

)

định dạng

(

'được nhúng - opentype '

)

,

url

(

'font / fira / woff2 / FiraSans-Bold.woff2 '

)

định dạng

(

'woff2'

)

,

url

(

'font / fira / woff / FiraSans-Bold.woff '

)

định dạng

(

'gâu gâu'

)

,

url

(

'font / fira / woff2 / FiraSans-Bold.ttf '

)

định dạng

(

'truetype'

)

;

font-weight

:

bold

;

font style

:

bình thường

;

}

@ font-face

{

font-family

:

"Fire Sans"

;

src

:

url >

(

'font / fira / eot / FiraSans-BoldItalic.eot'

)

;

src

:

url >

(

'font / fira / eot / FiraSans-BoldItalic.eot'

)

định dạng

(

'được nhúng - opentype '

)

,

url

(

'font / fira / woff2 / FiraSans-BoldItalic.woff2 '

)

định dạng

(

'woff2'

)

,

url

(

'font / fira / woff / FiraSans-BoldItalic.woff '

)

định dạng

(

'gâu gâu'

)

,

url

(

'font / fira / woff2 / FiraSans-BoldItalic.ttf '

)

định dạng

(

'truetype'

)

;

font-weight

:

700

;

font style

:

italic

;

}

...

Khi có nhiều biến thể hơn được thêm vào, sẽ hữu ích khi thêm nhận xét để dễ dàng xác định nhóm trọng số phông chữ hơn. Do đó, bạn đã thêm một nhận xét CSS bên trên quy tắc @ font-face đầu tiên. Sau đó, bên dưới quy tắc đầu tiên, bạn đã tạo thêm ba quy tắc @ font-face cho các biến thể nghiêng, in đậm và nghiêng đậm của phông chữ

Lưu các cập nhật này vào tệp styles.css , sau đó làm mới tệp styles.html của bạn. Trình duyệt của bạn hiện đang tải tất cả các biến thể của họ phông chữ được cung cấp. Hình ảnh sau đây cho thấy sự khác biệt giữa các phiên bản giả và thật của chữ in đậm, in nghiêng và in nghiêng đậm:

So sánh văn bản với danh sách các kiểu chữ in đậm, nghiêng và nghiêng đậm do trình duyệt tạo ở bên trái và kiểu phông chữ thực sự ở bên phải.

Chữ đậm thật dày hơn nhiều so với chữ đậm giả của trình duyệt và văn bản gần nhau hơn, dẫn đến nét chữ dày hơn. Chữ nghiêng thực sự đáng chú ý hơn khi so sánh ký tự a viết thường trong từ “Nghiêng”. Phông chữ thay đổi kiểu của ký tự a khi in nghiêng. Ngoài ra, độ nghiêng của chữ nghiêng thật ở mức độ nhỏ hơn độ nghiêng giả của trình duyệt.

Tiếp theo, có một số biến thể phông chữ khác cần tải, vì các phần tử tiêu đề sử dụng các phiên bản Fira Sans có trọng lượng mỏng hơn.

Quay lại styles.css trong trình soạn thảo văn bản của bạn và tạo thêm bốn quy tắc @ font-face phía trên phiên bản thông thường @ font-face quy tắc:

styles.css

 

@ font-face

{

font-family

:

"Fira Sans"

;

src

:

url

(

'font / fira / eot / FiraSans-Thin.eot'

)

;

src

:

url

(

'font / fira / eot / FiraSans-Thin.eot'

)

định dạng

(

'nhúng- opentype '

)

,

url

(

'font / fira / woff2 / FiraSans-Thin.woff2 '

)

định dạng

(

'woff2'

)

,

url

(

'font / fira / woff / FiraSans-Thin.woff '

)

định dạng

(

'gâu gâu'

)

,

url

(

'font / fira / woff2 / FiraSans-Thin.ttf '

)

định dạng

(

'truetype'

)

;

font-weight

:

100

;

font-style

:

bình thường

;

}

@ font-face

{

font-family

:

"Fira Sans"

;

src

:

url

(

'font / fira / eot / FiraSans-ThinItalic.eot'

)

;

src

:

url

(

'font / fira / eot / FiraSans-ThinItalic.eot'

)

định dạng

(

'nhúng- opentype '

)

,

url

(

'font / fira / woff2 / FiraSans-ThinItalic.woff2 '

)

định dạng

(

'woff2'

)

,

url

(

'font / fira / woff / FiraSans-ThinItalic.woff '

)

định dạng

(

'gâu gâu'

)

,

url

(

'font / fira / woff2 / FiraSans-ThinItalic.ttf '

)

định dạng

(

'truetype'

)

;

font-weight

:

100

;

font style

:

italic

;

}

@ font-face

{

font-family

:

"Fire Sans"

;

src

:

url >

'fonts / fira / eot / FiraSans-Light.eot'

)

;

src

:

url >

'fonts / fira / eot / FiraSans-Light.eot'

)

định dạng

(

'nhúng- opentype'

)

,

url

(

'font / fira / woff2 / FiraSans-Light.woff2 '

)

định dạng

(

'woff2'

)

,

url

(

'font / fira / woff / FiraSans-Light.woff '

)

định dạng

(

'gâu gâu'

)

,

url

(

'font / fira / woff2 / FiraSans-Light.ttf '

)

định dạng

(

'truetype'

)

;

font-weight

:

200

;

font style

:

bình thường

;

}

@ font-face

{

font-family

:

"Fire Sans"

;

src

:

url >

(

'font / fira / eot / FiraSans-LightItalic.eot'

)

;

src

:

url >

(

'font / fira / eot / FiraSans-LightItalic.eot'

)

định dạng

(

'được nhúng - opentype '

)

,

url

(

'font / fira / woff2 / FiraSans-LightItalic.woff2 '

)

định dạng

(

'woff2'

)

,

url

(

'font / fira / woff / FiraSans-LightItalic.woff '

)

định dạng

(

'gâu gâu'

)

,

url

(

'font / fira / woff2 / FiraSans-LightItalic.ttf '

)

định dạng

(

'truetype'

)

;

font-weight

:

200

;

font-style

:

italic

;

}

...

Các quy tắc mới này tải các biến thể Thin Light của Fira Sans, được ánh xạ tới mã 100 200 font-weight tương ứng. Vì không có giá trị từ cho các kích thước này, bạn đã thay đổi giá trị cho thuộc tính font-weight thông thường và in đậm thành giá trị số của chúng.

Lưu những thay đổi này vào styles.css , sau đó quay lại trình duyệt của bạn và làm mới index.html . Các phần tử tiêu đề hiện đang sử dụng các biến thể mỏng hơn của Fira Sans, như thể hiện trong hình ảnh sau:

Khối màu tím lớn với văn bản màu trắng ở bên trong phông chữ sans-serif. Dưới đây là một số đoạn văn bản sans-serif có màu xám đậm với các tiêu đề sans-serif mỏng màu tím.

Trong phần này, bạn đã tải các tệp phông chữ tự lưu trữ với quy tắc @ font-face . Bạn đã biết cách giả in đậm và nghiêng có thể tác động đến cách trình bày trực quan của một phông chữ và cách liên kết nhiều tệp phông chữ với nhau bằng một giá trị font-family chung. Trong phần cuối cùng, bạn sẽ sử dụng một phông chữ có thể thay đổi, cho phép nhiều biến thể có nguồn gốc từ một tệp phông chữ duy nhất.

Làm việc với Phông chữ có thể thay đổi

Phông chữ có thể thay đổi là một bổ sung tương đối mới cho các tùy chọn của kiểu chữ web. Trong phần trước, mỗi trọng lượng và kiểu phông chữ phải được tải từ một tệp riêng lẻ, các phông chữ biến đổi chứa thông tin trong một tệp duy nhất mà từ đó nhiều biến thể có thể được tính toán. Phông chữ có thể thay đổi có thể tăng hiệu suất, cũng như cung cấp nhiều khả năng thiết kế hơn trước đây. Trong phần này, bạn sẽ tải một phông chữ có thể thay đổi bằng cách sử dụng quy tắc @ font-face và điều chỉnh cách hiển thị của phông chữ để tìm ra biến thể phù hợp.

Để bắt đầu làm việc với phông chữ có thể thay đổi, hãy mở styles.css trong trình soạn thảo văn bản của bạn. Trước tiên, hãy xóa tất cả các quy tắc @ font-face khỏi phần trước và thay thế chúng bằng quy tắc mới sau:

styles.css

  

@ font-face

{

font-family

:

Raleway

;

src

:

url

(

'font / raleway / Raleway.woff2'

)

định dạng

(

'woff2'

)

;

font-style

:

bình thường

;

font-weight

:

300 800

;

}

body

{

...

Một phông chữ biến đổi có cấu trúc giống với quy tắc @ font-face tiêu chuẩn. Trước tiên, bạn khai báo tên font-family , sau đó cung cấp danh sách các giá trị src , mặc dù thường với các phông chữ biến đổi, chỉ cần một định dạng. Thuộc tính font-style được đặt thành normal cho phông chữ này. Sự khác biệt đi kèm với giá trị font-weight . Thay vì xác định một giá trị duy nhất, một phạm vi được viết với trọng lượng mỏng nhất, sau đó là trọng lượng dày nhất. Bằng cách xác định phạm vi này, trình duyệt có thể chuẩn bị cho các tính toán biến thể có thể xảy ra. Tại đây, bạn đặt quy tắc font-face cho Raleway, với phạm vi font-weight từ 300 đến 400 .

Tiếp theo, bạn sẽ cần thiết lập Raleway trong ngăn xếp phông chữ. Xóa "Fira Sans" khỏi đầu ngăn xếp phông chữ và thay thế bằng Raleway . Vì tên Raleway không chứa bất kỳ khoảng trắng nào, nên nó không cần đặt trong dấu ngoặc kép:

styles.css

 

... nội dung

{

margin

:

0

;

background-color

:

hsl

(

0

,

0%

,

100%

)

;

color

:

hsl

(

0

,

0%

,

10%

) < / p>

;

line-height

:

1.5

;

font-family

:

Raleway

,

" PT Sans "

,

Calibri

,

Tahoma

,

sans-serif

;

}

...

Lưu các thay đổi của bạn vào styles.css và mở index.html trong trình duyệt web của bạn. Trình duyệt tạo ra trọng số phông chữ thực thay vì trọng số giả, nhưng không xử lý chữ nghiêng một cách chính xác do thiếu kiểu chữ nghiêng xác định.

Để thiết lập phiên bản in nghiêng của phông chữ biến Raleway, hãy quay lại styles.css trong trình soạn thảo văn bản của bạn. Bên dưới quy tắc @ font-face đầu tiên, hãy tạo bộ quy tắc mới:

styles.css

  

@ font-face

{

font-family

:

Raleway

;

src

:

url

(

'font / raleway / Raleway.woff2'

)

định dạng

(

'woff2'

)

;

font-weight

:

300 800

;

font-style

:

bình thường

;

}

@ font-face

{

font-family

:

Raleway

;

src

:

url

(

'font / raleway / Raleway-Italic.woff2'

)

định dạng

(

'woff2'

)

;

font-weight

:

300 800

;

font-style

:

italic

;

}

body

{

...

}

...

src đã thay đổi tên tệp phông chữ của nó từ Raleway.woff2 thành Raleway-Italic.woff2 font- giá trị style bây giờ là in nghiêng .

Lưu các thay đổi của bạn vào styles.css và làm mới trang trong trình duyệt của bạn. Trình duyệt hiện đang hiển thị phiên bản in nghiêng của các trọng số khác nhau của Raleway. Hình ảnh sau đây cho thấy phiên bản cập nhật của trang với bộ phông chữ đầy đủ của biến Raleway:

Khối màu tím lớn với văn bản màu trắng ở bên trong phông chữ sans-serif. Dưới đây là một số đoạn văn bản sans-serif có màu xám đậm với các tiêu đề sans-serif mỏng màu tím.

Lợi ích của việc sử dụng phông chữ biến đổi là bất kỳ giá trị số toàn bộ nào được xác định trong phạm vi font-weight đều có sẵn. Trong khi trọng lượng phông chữ tiêu chuẩn tăng theo giá trị 100, trọng lượng phông chữ biến đổi có thể tăng theo giá trị thấp nhất là 1. Điều này cung cấp một phương pháp để tinh chỉnh thiết kế trực quan của phông chữ theo những cách mà trước đây không thể thực hiện được.

Để sử dụng các giá trị trọng số từ phạm vi, hãy quay lại styles.css trong trình chỉnh sửa văn bản của bạn và thực hiện các thay đổi sau:

styles.css

  

. h1

{

font-size

:

3rem

;

font-weight

:

350

;

}

h2

{

font-size

:

2rem

;

font-weight

:

570

;

}

h3

{

font-size

:

1.75rem

;

font style

:

italic

;

font-weight

:

450

;

}

p

{

font-size

:

1.125rem

;

}

strong

{

font-weight

:

600

;

}

Đối với bộ chọn h1 , bạn đã thay đổi giá trị font-weight thành 350 . Sau đó, bạn đặt thuộc tính h2 font-weight thành 570 và thuộc tính h3 thành 450 < / code>. code>. Cuối cùng, bạn đã tạo phần tử strong select với thuộc tính font-weight được đặt thành 650

Đảm bảo rằng bạn lưu các thay đổi của mình vào styles.css , sau đó quay lại trình duyệt và làm mới index.html . Trình duyệt hiện hiển thị các trọng lượng khác nhau của phông chữ Raleway trên khắp trang. Hình ảnh sau đây cho thấy điều này trông như thế nào trong trình duyệt:

Khối màu tím lớn với văn bản màu trắng trong phông chữ sans-serif bên trong. Dưới đây là một số đoạn văn bản sans-serif màu xám đậm với các tiêu đề sans-serif đậm màu tím.

Trong phần cuối cùng này, bạn đã tải và sử dụng một phông chữ khác nhau trên trang web của mình. Nhiều biến thể hơn có thể đến từ một hoặc hai phông chữ thay đổi hơn một tá phông chữ tiêu chuẩn. Bạn cũng đã học cách điều chỉnh phông chữ có thể thay đổi để tìm ra biến thể phù hợp với nhu cầu thiết kế của mình ở một mức độ không giống như trước đây.

Kết luận

Phông chữ là thành phần quan trọng tạo nên tính thẩm mỹ trực quan của một thiết kế. Chúng là những nội dung được săn đón nhiều giúp một trang web nổi bật so với một trang web khác.

Trong suốt hướng dẫn này, bạn đã biết được các cách chính mà phông chữ có thể được sử dụng trên một trang web. Bạn đã sử dụng phông chữ cục bộ và ngăn xếp phông chữ để cho trình duyệt biết phông chữ nào cần thử tải. Sau đó, bạn đã sử dụng dịch vụ lưu trữ phông chữ để tải phông chữ Open Sans từ Google Fonts một cách hiệu quả. Tiếp theo, bạn thiết lập chuỗi quy tắc @ font-face của riêng mình và tạo nhóm phông chữ tự lưu trữ của riêng bạn. Cuối cùng, bạn đã xây dựng dựa trên những gì bạn đã học tải các phông chữ của riêng bạn để sử dụng các phông chữ có thể thay đổi và thử tính linh hoạt và hiệu suất mà chúng cung cấp. Hãy nhớ rằng điều quan trọng là phải luôn có phông chữ dự phòng trong ngăn xếp phông chữ bất kể phông chữ đó là cục bộ, từ dịch vụ lưu trữ hay tự lưu trữ, vì phông chữ có thể không tải vì những lý do không xác định

Cách tạo kiểu HTML bằng CSS là một trong những hướng dẫn phổ biến nhất trên thế giới


Xem thêm những thông tin liên quan đến chủ đề cách thêm phông chữ vào css trang web

How to Add a Custom Fonts to Your Website (HTML and CSS)

alt

  • Tác giả: iEatWebsites
  • Ngày đăng: 2021-09-03
  • Đánh giá: 4 ⭐ ( 4671 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: In this video you will learn how to add custom fonts to your website or web app. This is not about Google or Adobe fonts, this is for fonts that you downloaded or created.

    Download code:
    https://github.com/brickbones/custom-fonts

    Fonts used in this video:
    https://www.dafont.com/roblox.font
    https://befonts.com/memphis-river-font.html

    My Code Editor is VS Code:
    https://code.visualstudio.com/

    Follow me:
    https://twitter.com/ieatwebsites

Phông chữ trong CSS (CSS fonts)

  • Tác giả: laptrinhtudau.com
  • Đánh giá: 3 ⭐ ( 5979 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tại sao phải lựa chọn phông chữ ?, Họ của phông chữ chung trong CSS, Cách thêm phông chữ chữ trong CSS, Tạo kiểu cho phông chữ trong CSS

Làm thế nào để sử dụng font chữ của Google cho website

  • Tác giả: www.daipho.com
  • Đánh giá: 4 ⭐ ( 7728 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Google Fonts có nhiều font chữ đẹp và bắt mắt với hàng trăm font. Bài viết này hướng dẫn cách sử dụng Google Font cho website của bạn theo chuẩn code CSS

Hướng dẫn cách xài Google Font làm WebFont cho website

  • Tác giả: thinhweb.com
  • Đánh giá: 5 ⭐ ( 6926 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sử dụng Google Font vào việc thiết kế website tốt nhất. Kinh nghiệm sử dụng Google Font là một lợi thế giúp rút ngắn thời gian code một website

Làm thế nào để thêm phông chữ vào trang web của bạn

  • Tác giả: atpweb.vn
  • Đánh giá: 5 ⭐ ( 7008 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thêm một phông chữ độc đáo vào trang web của bạn là một cách tuyệt vời để làm cho thiết kế của bạn nổi bật trực tuyến.

Cách nhúng font vào web với @font-face, kỷ nguyên của Typography đã đến

  • Tác giả: freehost.page
  • Đánh giá: 5 ⭐ ( 4214 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Bài 10: Cách sử dụng font trong html và css

  • Tác giả: goclamweb.com
  • Đánh giá: 3 ⭐ ( 7297 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài này chúng ta sẽ tìm hiểu cách sử dụng font trong html và css. Có hai dùng font là tải về, dủng trực tiếp trong mã nguồn. Cách thứ hai là dùng google font.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Mảng Python - làm việc với các mảng trong python

By ads_php