Categories CSS

Tìm hiểu về font cho web (hướng dẫn từ Mozilla)

Trong phần đầu của bài, chúng ta sẽ khám phá các tính năng cơ bản dành cho việc định kiểu font và văn bản. Càng về sau, bài viết sẽ đi vào chi tiết và nâng cao hơn. Chúng ta sẽ học cách sử dụng font tùy chỉnh (custom fonts) để cho phép bạn khả năng có được sự đa dạng về kiểu dáng của văn bản.


Tóm tắt về font-family

Thuộc tính font-family được sử dụng để điều chỉnh văn bản trong HTML. Nó có thể lấy một hoặc nhiều tên font-family. Khi hiển thị một trang web, trình duyệt sẽ đi từ đầu danh sách cho đến cuối, bất cứ khi nào nó tìm được font-family mà nó có trong hệ thống, nó sẽ dừng lại và sử dụng font đó để làm style cho văn bản, ví dụ:

p {
  font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
}

Phương pháp này hoạt động tốt, nhưng cách sử dụng font truyền thống như thế làm lập trình viên bị hạn chế các lựa chọn. Chỉ có một vài font chữ bạn chắc chắn được rằng nó có mặt trên tất cả các hệ thống phố biến (MAC, Windows, Android, iOS,…) – chúng được gọi là font web an toàn (web safe fonts). Bạn có thể sử dụng font stack để chỉ định các font ưa thích, tiếp theo đó là các font web an toàn để thay thế, dự phòng bằng những font mặc định có mặt trong hầu hết nền tảng. Tuy nhiên, điều này làm gia tăng lượng công việc phải làm, vì cần phải kiểm tra cẩn thận để đảm bảo rằng thiết kế của bạn hoạt động với từng font.


Web font

Nhưng có một giải pháp khác hoạt động rất hiệu quả (nó thậm chí được hỗ trợ trên các trình duyệt cũ như IE 6). CSS cho phép bạn chỉ định các file font cụ thể, có sẵn trên web để tải xuống cùng với website của bạn khi nó được truy cập. Điều này có nghĩa là bất cứ trình duyệt nào hỗ trợ tính năng CSS này đều có thể hiển thị các font mà bạn chỉ định cụ thể. Thật tuyệt phải không nào! Cú pháp yêu cầu sẽ trông giống như bên dưới:

Điều đầu tiên, bạn cần có bộ quy tắc @font-face lúc bắt đầu viết CSS- cái chỉ định (các) file font cụ thể để tải xuống:

@font-face {
  font-family: "myFont";
  src: url("myFont.woff2");
}

Bên dưới bạn sử dụng tên font family mà bạn đã chỉ định bên trong @font-face để áp dụng font tùy chỉnh của bạn lên bất cứ khu vực chứa văn bản nào mà bạn muốn, như cách thông thường vẫn làm:

html {
  font-family: "myFont", "Bitstream Vera Serif", serif;
}

Đi sâu vào cú pháp của nó sẽ phức tạp hơn một chút. Chúng ta sẽ tìm hiểu ngay bên dưới.

Có một số thứ quan trọng bạn cần ghi nhớ trong đầu (bear in mind):

  1. Các font tùy chỉnh thường không phải là dạng miễn phí. Bạn sẽ phải trả tiền và/hoặc tuân thủ các điều kiện về giấy phép sử dụng, chẳng hạn như để lại link ghi công (credit) cho người sáng tạo trong mã của bạn (hoặc hiển thị trên website của bạn). Bạn không được phép lấy font và sử dụng nó mà không được cấp phép hợp pháp.
  2. Tất cả các trình duyệt lớn đều hỗ trợ định dạng WOFF/WOFF2 (Web Open Font Format phiên bản 1 và 2). Thậm chí các trình duyệt cũ hơn như IE9 (phát hành vào năm 2011) cũng đã hỗ trợ WOFF rồi.
  3. WOFF2 hỗ trợ đầy đủ các thông số kỹ thuật của TrueType và OpenType, bao gồm các font chữ biến đổi, font chữ màu và bộ sưu tập font chữ.
  4. Thứ tự mà bạn liệt kê font chữ rất quan trọng. Nếu bạn cung cấp cho trình duyệt một danh sách nhiều file font để tải về, trình duyệt sẽ chọn file font đầu tiên nó có khả năng sử dụng được. Đó là lý do vì sao định dạng bạn liệt kê đầu tiên phải là định dạng ưu tiên, ở thời điểm hiện tại đó là WOFF2 – các định dạng cũ hơn sẽ để ở đằng sau. Trình duyệt khi không xử lý được một định dạng nào đó nó sẽ tải định dạng dự phòng mà nó biết trong danh sách bạn liệt kê.
  5. Nếu bạn cần website hiển thị font tùy chỉnh ngay cả với các trình duyệt cũ, bạn phải cung cấp thêm định dạng EOT (Embedded Open Type), TTF (TrueType Font) và SVG. Bài viết này sẽ hướng dẫn bạn cách sử dụng Fontsquirrel Webfont Generator để tạo ra được các định dạng theo yêu cầu.

PS: Font tùy chỉnh trên web là công nghệ được hỗ trợ kể từ phiên bản Internet Explorer 4 rồi cơ đấy các bạn ạ!

Bạn có thể sử dụng FireFox Font Editor để tìm hiểu và xử lý các font sử dụng trên trang của bạn, bất kể là chúng có phải là web font hay không.


Thực hành: ví dụ về web font

Chúng ta đã ghi nhớ được vài thứ, giờ đến lúc xây dựng một ví dụ cơ bản về webfonts từ các nguyên tắc đầu tiên. Rất khó để minh họa điều này bằng cách sử dụng font được nhúng trực tiếp trong bài viết bạn đang đọc. Do vậy chúng ta sẽ theo các hướng dẫn chi tiết bên dưới để hoàn thành ý tưởng.

Bạn cần sử dụng trang mẫu này chúng tôi (Mozilla) đã viết sẵn: web-font-start.html và  web-font-start.css để thêm code của bạn vào (xem ví dụ). Hãy tạo bản sao của các file này trong thư mục máy tính cá nhân của bạn luôn bây giờ. Trong file web-font-start.css bạn sẽ thấy một số đoạn mã CSS nhỏ xử lý với layout cơ bản và các cài đặt cho ví dụ này.

PS từ người dịch: nếu thích thì bạn tự tạo trang html riêng của bản thân cũng được, đơn giản chỉ là thêm vào đó các thẻ p rồi cho văn bản vào là xong. Mozilla thì cẩn thận cho chúng ta “ăn sẵn” luôn để đỡ mất công thôi.


Tìm vài font

Trong ví dụ này, chúng ta sẽ sử dụng hai web font: một cho heading, và một cho body. Để bắt đầu, chúng ta cần tìm các file font. Các xưởng font tạo ra font và lưu trữ chúng ở nhiều định dạng khác nhau. Nhìn chung có 3 loại trang web mà bạn có thể tìm các font chữ:

  • Các website phân phối font chữ miễn phí: Đây là các trang tạo ra font chữ miễn phí mà bạn có thể tải về (có thể vẫn có những điều kiện nhất định về giấy phép / license sử dụng, chẳng hạn như ghi công người sáng tạo). Ví dụ về các trang này bao gồm Font Squirrel, dafont, và Everything Fonts.
  • Các website phân phối font trả phí. Đây là các trang tạo ra font và bán nó, chẳng hạn như fonts.com, hoặc myfonts.com, hoặc Exljbris.
  • Các dịch vụ font trực tuyến. Đây là các website lưu trữ và phục vụ font cho bạn, làm cho quá trình xử lý được dễ dàng. Bạn xem phần sử dụng font chữ trực tuyến ở mục bên dưới để biết chi tiết.

Nào giờ chúng ta hãy chọn lấy vài font! Bạn vào trang Font Squrriel và chọn lấy hai font: một font chữ đẹp mắt cho tiêu đề, và một font chữ ít hào nhoáng hơn, dễ đọc hơn cho văn bản dài.

Khi bạn tìm ra được font mình muốn, hãy nhấn vào nút download và lưu file vào bên trong thư mục HTML và CSS bạn lưu trước đó. Không thành vấn đề liệu rằng chúng là TTF (True Type Fonts) hay là OTF (Open Type Fonts).

Giải nén hai gói font này (Web font thường được phân phối dưới dạng ZIP và bao gồm các file font và thông tin giấy phép). Bạn có thể tìm thấy nhiều file font trong gói – một số được phân phối dưới dạng quen thuộc với các định dạng khác nhau, chẳng hạn như mỏng (thin), trung bình (medium), đậm (bold), mỏng nghiêng (thin italic), vân vân. Trong ví dụ này, chúng ta chỉ muốn bạn quan tâm đến chính bản thân mình với file font duy nhất cho từng chọn lựa.


Tạo ra các đoạn mã cần thiết

Giờ bạn cần tạo ra các đoạn mã cần thiết (và các định dạng font theo yêu cầu). Với từng font, hãy theo các bước sau:

  1. Cần đảm bảo rằng bạn đã đáp ứng mọi yêu cầu cấp phép nếu bạn sử dụng chúng cho dự án thương mại hoặc/và dự án web thực tế.
  2. Bạn truy cập trang Fontsquirrel Webfont Generator. (PS từ người dịch: bạn nên dùng công cụ cloudconvert.com/ttf-to-woff để chuyển sẽ tốt hơn vì FWG bỏ qua các ký tự có dấu tiếng Việt).
  3. Tải hai file font của bạn lên thông qua nút Upload Fonts.
  4. Tick vào tùy chọn “Yes, the fonts…”
  5. Click vào Download your kit.

Sau khi quá trình xử lý hoàn tất, bạn tải file ZIP về. Lưu nó dưới cùng thư mục như HTML và CSS.

Nếu bạn cần hỗ trợ các trình duyệt cũ, hãy chọn mode là Expert trong Fontsquirrel Webfont Generator, chọn SVG, EOT, và TTF trước khi tải bộ kit xuống.

Các dịch vụ tạo font thường giới hạn kích cỡ tối đa được phép. Nếu bạn rơi vào trường hợp đó, hãy cân nhắc sử dụng các công cụ như:

  1. sfnt2woff-zopfli để chuyển từ ttf sang woff;
  2. fontforge để chuyển từ ttf sang svg;
  3. batik ttf2svf để chuyển từ ttf sang svg;
  4. woff2 để chuyển từ ttf sang woff2;

Triển khai mã trong demo

Lúc này, bạn giải nén gói webfont bạn vừa mới chuyển đổi. Bên trong thư mục đã giải nén bạn sẽ thấy một số mục hữu ích như:

  • Hai phiên bản của từng font: các file .woff.woff2;
  • Một file HTML demo cho từng font – click chúng và mở bằng trình duyệt để xem các font này trông như thế nào trong các tình huống sử dụng khác nhau;
  • Một file stylesheet.css, cái bao gồm đoạn mã @font-face đã được tạo sẵn;

Để triển khai các fonts này trong demo, bạn hãy theo các bước sau:

  1. Thay đổi thư mục đã giải nén sang một dạng dễ nhớ và đơn giản hơn, chẳng hạn như fonts.
  2. Mở file stylesheet.css và copy hay rule (tức là mã của chúng) vào trong file web-font-start.css – bạn cần đưa chúng vào vị trí đầu tiên, trước bất kỳ mã CSS nào của bạn, cũng như các font cần nhúng đó mà bạn có thể sử dụng chúng trong trang.
  3. Với từng hàm url() chỉ đến file font mà chúng ta muốn nhúng vào bên trong CSS. Chúng ta cần đảm bảo rằng đường dẫn của các file là chính xác, vì thế hãy thêm fonts/ ở phần đầu từng đường dẫn (điều chỉnh nếu thấy cần thiết).
  4. Giờ thì bạn có thể sử dụng các font này, nó sẽ tương tự như bất cứ font web an toàn nào. Ví dụ:
@font-face {
    font-family: 'zantrokeregular';
    src: url('fonts/zantroke-webfont.woff2') format('woff2'),
         url('fonts/zantroke-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

font-family: 'zantrokeregular', serif;

Sử dụng dịch vụ font trực tuyến

Dịch vụ font trực tuyến lưu trữ và phục vụ font cho website của bạn vì thế bạn không cần phải lo về chuyện viết các dòng mã @font-face. Thay vào đó, bạn thường chỉ cần chèn một hoặc hai dòng mã đơn giản vào trang của bạn để mọi thứ hoạt động ổn thỏa. Ví dụ bao gồm các mã của Adobe Fonts, Cloud typography. Hầu hết các dịch vụ dạng này là trả phí, ngoại trừ dịch vụ đáng chú ý của Google Fonts, một sản phẩm miễn phí hữu ích, đặc biệt khi muốn kiểm tra nhanh hoặc viết demos (thử nghiệm).

Hầu hết các dịch vụ đều rất dễ sử dụng, ví thế chúng ta không cần đi vào chi tiết làm gì. Hãy thử xem nhanh một đoạn mã của Google font bạn sẽ hiểu. Một lần nữa hãy sử dụng bản sao web-font-start.htmlweb-font-start.css để bắt đầu.

  1. Truy cập trang Google Fonts.
  2. Tìm font mà bạn thích, nếu cần hãy sử dụng bộ lọc ở đầu trang để hiển thị kiểu font mà bạn muốn chọn cũng như lựa chọn vài font ưng ý.
  3. Copy đoạn mã CSS mà Google Font cung cấp cho bạn.

Chi tiết hơn về @font-face

Giờ chúng ta cùng khám phá cú pháp của @font-face được tạo cho bạn bằng fontsquirrel. Một trong các rule sẽ trông giống như thế này:

@font-face {
  font-family: 'zantrokeregular';
  src: url('zantroke-webfont.woff2') format('woff2'),
       url('zantroke-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

Chúng ta sẽ xem từng đoạn để biết ý nghĩa từng cái:

  • font-family: Dòng này chỉ định tên mà bạn muốn liên kết đến font. Đây là tên mà bạn đặt theo ý thích, không có hạn chế gì cả, miễn là bạn sử dụng nó nhất quán trong CSS của bạn.
  • src: Đây là các dòng cho biết đường dẫn tới các file font để nhúng vào CSS của bạn (phần url), và định dạng cho từng file font. Phần sau trong từng phần (format) là các tùy chọn (tức có cũng được, không có cũng không sao), nhưng đáng làm vì nó sẽ giúp trình duyệt nhanh chóng biết được rằng font đó nó có dùng được hay không. Nhiều khai báo có thể được liệt kê, phân chia bằng dấy phẩy. Vì trình duyệt sẽ tìm chúng theo quy tắc dòng, do vậy tốt nhất là hãy bắt đầu với định dạng ưa thích, chẳng hạn như WOFF2.
  • font-weight / font-style: Đây là những dòng chỉ định weight của font cũng như liệu nó có dạng italic (nghiêng) hay không. Nếu bạn nhúng nhiều weight của cùng font, bạn có thể chỉ thị weight/style cụ thể và sau đó sử dụng các giá trị khác của font-weight/font-style để chọn giữa chúng, thay vì gọi toàn bộ các thành viên khác nhau của họ font chữ bằng các tên font-family khác nhau. Mẹo, bạn có thể tham khảo bài viết này của Roger Johansson để biết mẹo đặt tên hiệu quả.

Fonts biến đổi (variable)

Có một số công nghệ mới về font hiện khả dụng trên các trình duyệt, đó là variable fonts. Các font này cho phép nhiều biến đổi khác nhau của typeface được kết hợp vào một tệp duy nhất, thay vì phải chia tách ra thành nhiều file với các width, weight hoặc style khác nhau. Kiến thức về loại font này sẽ là phần nâng cao nên sẽ không được đề cập chi tiết trong bài này, bạn có thể tìm hiểu thêm trên mạng để biết thêm thông tin.

(Web fonts, dịch từ hướng dẫn của Mozilla, phần thông tin dành cho nhà phát triển)

Back to Top