1.1.1
Web fonts
Ở phần trên chúng ta đã tìm hiểu cách định dạng phông chữ
cho một phần tử HTML. Tuy nhiên, các phông chữ này đều phải được cài đặt sẵn trên
đĩa cứng của người dùng và số lượng của chúng thường là hữu hạn.
Có một nguồn khác để lấy được phông chữ là từ trên mạng. Người
ta gọi các phông chữ này là web fonts. Theo đó, bạn có thể lấy phông chữ từ một
máy server chuyên cung cấp phông, hoặc lưu luôn các phông chữ trong thư mục của
website để chủ động khi sử dụng.
Lấy phông chữ từ server dịch vụ
Trên mạng có nhiều server chuyên cung cấp phông chữ như một
dịch vụ, có loại phải trả phí, có loại miễn phí. Tất nhiên, loại trả phí sẽ có
chất lượng cao, độc đáo và chuyên nghiệp hơn.
Chúng ta cùng sử dụng web font miễn phí của Google:
– Vào dịch vụ phông chữ của Google (https://fonts.google.com/)
– Chọn 2 phông chữ mà bạn muốn dùng. Ví dụ: Dongle và
Ubuntu.
Bạn bấm vào nút View selected families (góc trên cùng, phía
phải) để xem các phông đã được chọn.
– Chúng ta sẽ chép đoạn mã dưới nút <link>, dán vào
vùng head của mã HTML.
…
<head>
<meta charset="UTF-8">
<title>Web fonts</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dongle:wght@300;400;700&display=swap" rel="stylesheet">
…
– Vậy là chúng ta đã có thể khai báo thuộc tính font-family
để sử dụng web font có sẵn trên mạng.
<style>
body {
font-family: Dongle, sans-serif;
}
</style>
– Xem kết quả trên trang web, bạn sẽ thấy dòng chữ được hiển
thị RẤT XẤU (chữ to, chữ nhỏ, không đồng đều). Vì phông chữ Dongle không hỗ trợ
tốt cho tiếng Việt. Để khắc phục, ở bước đầu tiên bạn phải lọc các phông chữ có
hỗ trợ tiếng Việt. Ví dụ, khi đó bạn sẽ dùng 2 phông chữ là Roboto và Open
Sans.
Lưu phông chữ trong website
Để sử dụng web font một cách chủ động, thay vì sử dụng dịch
vụ phông chữ từ các server trên mạng, chúng ta sẽ tải luôn các web font về thư
mục website.
Các bước thực hiện:
– Tìm phông chữ phù hợp. Trên mạng có nhiều trang web cho tải
phông chữ (miễn phí, có phí). Chúng ta sẽ tải phông chữ miễn phí từ trang fontsquirrel.com.
– Vào trang web fontsquirrel.com, chọn phông chữ Acherus Grotesque. Bạn phải tạo tài khoản
trên hệ thống fontsquirrel, để có thể tải được phông chữ về máy.
– Tạo thư mục fonts
trong dự án, giải nén phông chữ vừa tải về vào thư mục fonts. Chúng ta sẽ thấy
rất nhiều các tập tin phông chữ (có phần mở rộng là .otf), ví dụ: Fontspring-DEMO-acherusgrotesque-black.otf,
Fontspring-DEMO-acherusgrotesque-blackitalic.otf.
– Vậy là chúng ta đã tải được phông chữ về máy và lưu trong
thư mục của website. Công việc tiếp theo là khai báo cho CSS biết tên và vị trí
của tập tin chứa phông chữ.
– Sử dụng chỉ dẫn @font-face
để khai báo tên và chỉ ra đường dẫn của tập tin chứa phông chữ:
…
<style>
@font-face
{
font-family:
acherusgrotesque;
src: url('fonts\Demo-Acherus Grotesque\Demo_Fonts\Fontspring-DEMO-acherusgrotesque-black.otf');
}
…
– Giờ thì chúng ta có thể sử dụng phông chữ acherusgrotesque để định dạng cho các
văn bản của trang web, sử dụng thuộc tính font-family:
body {
font-family: acherusgrotesque, sans-serif;
}
– Lưu lại mã nguồn và quan sát kết quả trên trình duyệt, bạn
sẽ thấy phông chữ acherusgrotesque đã
được áp dụng cho văn bản.
Thông tin thêm:
– OTF là viết tắt của OpenType Fonts, là một "chuẩn"
để định dạng, lưu trữ và đặc tả phông chữ. Ngoài định dạng phông chữ theo chuẩn
OTF, còn có nhiều chuẩn định dạng khác như: TTF, WOFF, EOT, SVG…v.v.
– Các trình duyệt khác nhau và các phiên bản khác nhau của mỗi
trình duyệt cũng có tính hỗ trợ khác nhau đối với các chuẩn định dạng của phông
chữ. Vì vậy, chúng ta phải để ý đến tính tương thích khi tải và sử dụng phông
chữ. Xem bảng minh họa:
|
|
EOT |
OTF/ TTF |
WOFF |
WOFF2 |
SVG |
|
IE 9 - 11 |
x |
x |
X |
|
|
|
Chrome 43 - 49 |
|
x |
x |
x |
|
|
Firefox 40 - 45 |
|
x |
x |
x |
|
|
Safari 8 - 9 |
|
x |
x |
|
x |
– Nên kiểm tra xem trình duyệt web có hỗ trợ định dạng phông
mà chúng ta đang sử dụng hay không, nếu không chúng ta cần phải chuyển đổi sang
các “chuẩn” định dạng phông phù hợp. Ví dụ trang web dùng để chuyển định dạng
phông: https://www.fontsquirrel.com/tools/webfont-generator
Một số kinh nghiệm khi làm việc với phông chữ
Khi lựa chọn phông cho một trang web, nên làm như sau: bắt đầu
là web font ưng ý nhất, sau đó là một vài phông tương đương (trên máy tính người
dùng), cuối cùng là loại phông. Ví dụ, nếu muốn hiển thị nội dung bằng kiểu chữ
“không có chân” thì sẽ bắt đầu là phông Roboto,
sau đó là một số phông cùng loại (Futura Univers,
Tahoma, Geneva), cuối cùng là loại phông sans-serif. Về mặt lý
thuyết, thì không giới hạn số phông khai báo, tuy nhiên, không nên khai báo nhiều
hơn 10 phông. Chuỗi khai báo sẽ có dạng:
font-family: Futura,
Univers, Tahoma, Geneva, sans-serif;
Khi lựa chọn
phông, cần phải để ý đến tính phổ biến của nó, nghĩa là nó phải được cài đặt phổ
biến trên các hệ điều hành (Windows, Mac OS, Linux), được sử dụng phổ biến
trong các ứng dụng (Microsoft Office, Adobe Creative Suite).
Bảng sau là một số
đề nghị tham khảo:
|
Loại
phông chữ |
Cách
khai báo |
|
Narrow serif (Times-based) |
Cambria,
"Hoefler Text", "Nimbus Roman
No9 L Regular", Times, "Times
New Roman", serif; |
|
Wide serif (Georgia-based) |
Constantia,
"Lucida Bright", Lucidabright,
"Lucida Serif", Lucida, "DejaVu
Serif", "Liberation
Serif", Georgia, serif; |
|
Narrow sans-serif (Arial-based) |
Univers, Calibri, "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva,
"Helvetica Neue",
Helvetica, Arial, sans-serif; |
|
Wide sans-serif (Verdana-based) |
"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Liberation Sans", Verdana, sans-serif; |
|
Monospace |
"Andale Mono WT", "Andale Mono", "Lucida Console", "Liberation
Mono", "Courier New", Courier,
monospace; |
1.1.2 Xem và đọc thêm
– [1] Jenifer Niederst
Robbins, Learning Web Design,
O’Reilly, 2018, trang 261 - 268
– [2]
font-family: https://developer.mozilla.org/en-US/docs/Web/CSS/font-family
– [3] web fonts: https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts
– [4] https://en.wikipedia.org/wiki/Web_Open_Font_Format
– [5] https://medium.com/@aitareydesign/understanding-of-font-formats-ttf-otf-woff-eot-svg-e55e00a1ef2
1.1.3 Bài tập và thực hành
Bài tập 1. Viết lại các đoạn mã trong phần
lý thuyết.
Bài
tập 2. Formatting a menu.
[menu.html]
<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8">
<title>Black Goose Bistro Summer Menu</title>
</head>
<body>
<div id="info">
<h1>Black Goose Bistro • Summer Menu</h1>
<p>Baker's Corner, Seekonk,
Massachusetts<br>
<span class="label">Hours: Monday through Thursday:</span> 11 to 9, <span class="label">Friday and Saturday;</span> 11 to midnight</p>
</div>
<div id="appetizers">
<h2>Appetizers</h2>
<p>This season, we explore the spicy
flavors of the southwest in our appetizer collection.</p>
<dl>
<dt>Black bean purses</dt>
<dd>Spicy black bean and a blend of
mexican cheeses wrapped in sheets of phyllo and baked until golden. <span class="price">$3.95</span></dd>
<dt class="newitem">Southwestern napoleons with lump crab
— <strong>new item!</strong></dt>
<dd>Layers of light lump crab meat, bean
and corn salsa, and our handmade flour tortillas. <span class="price">$7.95</span></dd>
</dl>
</div>
<div id="entrees">
<h2>Main courses</h2>
<p>Big, bold flavors are the name of the
game this summer. Allow us to assist you with finding the perfect wine.</p>
<dl>
<dt class="newitem">Jerk rotisserie chicken with fried
plantains — <strong>new item!</strong></dt>
<dd>Tender chicken slow-roasted on the
rotisserie, flavored with spicy and fragrant jerk sauce and served with fried
plantains and fresh mango. <strong>Very spicy.</strong> <span class="price">$12.95</span></dd>
<dt>Shrimp sate kebabs with peanut sauce</dt>
<dd>Skewers of shrimp marinated in
lemongrass, garlic, and fish sauce then grilled to perfection. Served with
spicy peanut sauce and jasmine rice. <span class="price">$12.95</span></dd>
<dt>Grilled skirt steak with mushroom
fricasee</dt>
<dd>Flavorful skirt steak marinated in
Asian flavors grilled as you like it<sup>*</sup>. Served over a blend of sauteed wild
mushrooms with a side of blue cheese mashed potatoes. <span class="price">$16.95</span></dd>
</dl>
</div>
<p class="warning"><sup>*</sup> We are required to warn you that undercooked food is a health risk.</p>
</body>
</html>
In
this exercise, we’ll change the fonts for the body and main heading of the
Black Goose Bistro menu document. Open the menu.html
in a text editor. You can also open it in a browser to see its “before” state.
I’ve
included an embedded font in this exercise to show you how easy it is to do
with a service like Google Web Fonts.
1.
Use an embedded style sheet for this exercise. Start by adding a style element
in the head of the document, like this:
<head>
<title>Black Goose
Bistro</title>
<style>
</style>
</head>
2.
I would like the main text to appear in Verdana or some other sans-serif font.
Instead of writing a rule for every element in the document, we will write one
rule for the body element that will be inherited by all the elements it
contains. Add this rule to the embedded style sheet:
<style>
body {font-family: Verdana,
sans-serif;}
</style>
3.
I want a fancy font for the “Black Goose Bistro, Summer Menu” headline, so I
chose a free display font called Marko One from Google Web Fonts
(www.google.com/webfonts). Google gave me the code for linking the font file on
their server to my HTML file (it’s actually a link to an external style sheet).
It must be placed in the head of the document, so copy it exactly as it
appears, but keep it on one line. Put it after the title and before the style
element.
<head>
<title>Black Goose Bistro</title>
<link
href="http://fonts.googleapis.com/css?family=Marko+One"
rel="stylesheet">
<style>
…
4.
Now write a rule that applies it to the h1 element. Notice I’ve specified
Georgia or another serif font as fallbacks:
<style>
body {font-family: Verdana,
sans-serif;}
h1 {font-family: "Marko
One", Georgia, serif;}
</style>
5.
Save the document and reload the page in the browser. Note that you’ll need to
have an internet connection and a current browser to view the Marko One headline
font. We’ll work on the text size in the next exercise.
1.1.4 Câu hỏi ôn tập
Câu 1. Trong CSS, với khai báo: font-family: Verdana, Arial, Helvetica, sans-serif; Phông chữ nào
có độ ưu tiên cao nhất.
A. Arial
B. Verdana
C. Helvetica
D. sans-serif
Câu 2. Một số loại
phông chữ phổ biến trong CSS gồm:
A. serif,
sans-serif, monospace, cursive, fantasy
B. serif,
sans-serif, arrial, cursive, fantasy
C. font-family,
sans-serif, monospace, cursive, fantasy
D. serif, sans-serif, monospace, roboto, fantasy
Câu 3. Cái nào sau đây không phải là một chuẩn định dạng
phông chữ ?
A. OTF
B. TTF
C. WOFF2
D. OOF
Câu 4. Trên máy người duyệt web, trình duyệt có thể lấy
phông chữ từ đâu? Chỉ ra phát biểu
sai.
A. Máy tính của người
dùng
B. Máy server cung cấp dịch vụ phông chữ
C. Thư mục fonts trong website
D. Máy tính của lập trình viên
Đáp án: 1(B), 2(A),
3(D), 4(D)
-----
-----