-----
17
Sử dụng phông chữ
Phông chữ (font) là
gì?
Phông chữ là một tập hợp hoàn chỉnh của các ký tự
(character) bao gồm: chữ cái (letter), số, dấu câu và kí tự đặc biệt khác
(glyph)…theo cùng một kiểu hình dáng (họa hình), định dạng (regular, bold hoặc
italic) và kích cỡ (size)[1].
Vậy khi nói đến phông chữ thường gồm các thông tin sau: kiểu
chữ (typeface), định dạng (normal, bold, italic) và kích cỡ. Ví dụ: Times New
Roman, normal, 12pt là một phông chữ; hoặc Times New Roman, bold, 14pt là một
phông chữ khác.
Kiểu chữ (typeface) là tập hợp các kí tự có kiểu dáng đồng
nhất. Ví dụ Times New Roman ở ví dụ trên chính là một kiểu chữ. Ví dụ một số kiểu
chữ khác: Arial, Tahoma, VNI-Times, Ubuntu, Roboto…v.v.
Như vậy một phông chữ chính là kiểu chữ với kiểu dáng và
kích thước khác nhau. Ở thời kì đầu của kĩ thuật in ấn, khi nhân viên in ấn phải
sắp các khối chữ kim loại sao cho đồng nhất về kích thước và cùng một kiểu thì
việc phân biệt các loại phông chữ là quan trọng. Tuy nhiên, hiện nay, các phông
chữ trên máy tính được định dạng theo kiểu vector, do đó, có thể dễ dàng thay đổi
kiểu dáng, kích thước để chuyển thành phông khác. Do vậy, sự phân biệt giữa kiểu
chữ và phông chữ là không thực sự cần thiết. Kết quả là hai khái niệm kiểu chữ
và phông chữ có thể sử dụng thay thế cho nhau.
Trình duyệt lấy phông
chữ ở đâu để hiển thị nội dung văn bản của trang web?
Tùy theo khai báo của người làm web, trình duyệt có thể lấy
phông chữ trên máy tính người dùng hoặc tải về từ web server hoặc từ bên ngoài mạng.
– Nếu lấy phông chữ trên máy tính người dùng, nghĩa là sử dụng
system font
– Nếu lấy phông chữ từ web server hoặc từ bên ngoài mạng,
nghĩa là sử dụng web font
System font là gì?
System font là các phông chữ được cài đặt sẵn trong các thiết
bị người dùng (máy tính, ipad, điện thoại). Cụ thể hơn, trên mỗi thiết bị, phần
mềm quản lý phông chính là Hệ điều hành. Vậy system font là các phông chữ đi
kèm với mỗi Hệ điều hành.
Sử dụng system font có ưu điểm là an toàn, không mất thời
gian tải từ mạng về máy, ngoài ra người dùng sẽ cảm thấy rất dễ chịu vì phông
chữ trên trang web và phông chữ trên máy tính họ đang sử dụng là giống nhau,
quen thuộc[2].
Bảng sau đây là một số system font ứng với các hệ điều hành,
|
Hệ điều hành
|
Phiên bản
|
System font
|
|
Mac OS X
|
El Capitan
|
San Francisco
|
|
Mac OS X
|
Yosemite
|
Helvetica Neue
|
|
Mac OS X
|
Mavericks
|
Lucida Grande
|
|
Windows
|
Vista
|
Segoe UI
|
|
Windows
|
XP
|
Tahoma
|
|
Windows
|
3.1 > ME
|
Microsoft Sans
Serif
|
|
Android
|
Ice Cream
Sandwich (4.0)+
|
Roboto
|
|
Android
|
Cupcake (1.5)
> Honeycomb (3.2.6)
|
Droid Sans
|
|
Ubuntu
|
Mọi phiên bản
|
Ubuntu
|
Web safe font[3] là gì?
Như đã biết người dùng sẽ dùng rất nhiều thiết bị, tương ứng
là rất nhiều các hệ điều hành khác nhau để duyệt web.
Nếu người làm web chọn lựa phông chữ không hợp lý sẽ dẫn tới
tình trạng trình duyệt không tìm được phông chữ như mong muốn. Và trình duyệt sẽ
lấy một phông chữ bất kì để thay thế. Điều này sẽ làm cho việc hiển thị nội
dung không được như dự định ban đầu. Có thể làm cho giao diện trở lên rất xấu.
Một giải pháp được gọi là an toàn là sử dụng các phông chữ
có trong mọi hệ điều hành. Thực tế điều này không có, do vậy, người lập trình sẽ
chọn những phông chữ nào mà có trong nhiều hệ điều hành để sử dụng. Những phông
chữ này được gọi là những phông chữ “an toàn”.
Xem hình minh họa một số phông chữ an toàn[4],
Danh sách một số phông chữ được cho là “an toàn”[5]
|
Courier New
|
Arial
|
Georgia
|
|
Times New Roman
|
Verdana
|
Helvetica
|
|
Times
|
Courier
|
Platino
|
|
Garamond
|
Bookman
|
Comic Sans MS
|
|
Trebuchet MS
|
Arial Black
|
Impact
|
Web font?
Web font là kĩ thuật lấy phông chữ từ trên mạng về trình duyệt
để hiển thị. Phông chữ có thể được đặt trong chính website tại web server, hoặc
tải về từ một nguồn khác trên mạng.
Vì được chủ động nguồn phông, nên người làm web có thể sử dụng
các loại phông chữ đa dạng, độc đáo, để làm tăng hiệu quả hiển thị của trang
web.
Có thể sử dụng các phông chữ có bản quyền (trả phí) và các
phông chữ miễn phí.
Tuy nhiên cần cân nhắc đến quá trình tải phông từ mạng về
máy người dùng để đảm bảo tốc độ tải và hiển thị trang web.
Một số loại web font[6]:
– TrueType Fonts/OpenType Fonts: viết tắt là TTF, TTF/OTF
– Embedded OpenType: viết tắt là EOT
– Scalable Vector Graphics: viết tắt là SVG
– Web Open Font Format: viết tắt là WOFF
Cần kiểm tra để đảm bảo trình duyệt có hỗ trợ các loại phông
sẽ sử dụng.
Một số ví dụ trong thực
tế
Đơn giản nhất là sử dụng thuộc tính font-family, với danh
sách các phông dự phòng. Bắt đầu là phông chính thức, sau đó là các phông dự
phòng, và cuối cùng là một họ phông.
Cú pháp là
font-family: tên phông cụ thể, họ phông;
Ví dụ,
body {
font-family:
"Times New Roman", Times, serif;
}
hoặc
body {
font-family: Arial,
Helvetica, sans-serif;
}
Một số họ phông phổ biến gồm
– Serif
– Sans-serif
– Monospace
– Cursive
– Fantasy
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,
|
Kiểu phông
|
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;
|
Cách sử dụng system font của trang Github[7],
/* System Fonts as used by GitHub */
body {
font-family:
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
}
Cách sử dụng system font của trang Medium và Wordpress,
/* System Fonts as used by Medium and WordPress */
body {
font-family:
-apple-system,BlinkMacSystemFont,"Segoe
UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica
Neue",sans-serif;
}
Cách sử dụng system font bằng @font-face,
/* Define the "system" font family */
@font-face {
font-family: system;
font-style: normal;
font-weight: 300;
src:
local(".SFNSText-Light"),
local(".HelveticaNeueDeskInterface-Light"),
local(".LucidaGrandeUI"), local("Ubuntu Light"),
local("Segoe UI Light"), local("Roboto-Light"),
local("DroidSans"), local("Tahoma");
}
/* Now, let's apply it on an element */
body {
font-family:
"system";
}
Cách sử dụng web font bằng @font-face,
– Lấy web font trực tiếp trên mạng
<link
href="https://fonts.googleapis.com/css?family=Open+Sans"
rel="stylesheet">
– Sử dụng font cho phần tử HTML
body {
font-family: "Open
Sans", sans-serif;
}
Hoặc,
– Tải web font trên mạng về, để sẵn trong website
– Sử dụng luật @font-face để khai báo và chỉ ra đường dẫn của
web font
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: local('Open Sans
Light'), local('OpenSans-Light'),
url('../vendor/fonts/open-sans-v15-vietnamese_latin/open-sans-v15-vietnamese_latin-300.woff2')
format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../vendor/fonts/open-sans-v15-vietnamese_latin/open-sans-v15-vietnamese_latin-300.woff')
format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
– Sử dụng font cho phần tử HTML
body {
font-family: "Open
Sans", sans-serif;
}
[1]
http://designs.vn/tin-tuc/phong-chu-font-la-gi-_15381.html#.W7632GgzaaE
[2]
https://css-tricks.com/snippets/css/system-font-stack/
[3]
https://stackoverflow.com/questions/11610395/web-safe-fonts-what-exactly-does-that-mean
[4]
https://www.coffeecup.com/help/articles/what-is-a-web-safe-font/
[5]
https://websitesetup.org/web-safe-fonts-html-css/
[6]
https://en.wikipedia.org/wiki/Web_typography
[7]
https://css-tricks.com/snippets/css/system-font-stack/
Cập nhật [17/10/2018]
-----------
Xem thêm: Làm web (07) -