Font

Hướng dẫn

- Để thay đổi font chữ trong CSS ta dùng thuộc tính font-family (hoặc dùng tắt bằng thuộc tính font), ví dụ:

p {
    font-family: "Helvetica Neue";
}

Tuy nhiên, việc hiển thị font chữ sẽ phụ thuộc vào trình duyệt, hệ điều hành, ... do đó chúng ta nên sử dụng một vài font tương đồng nhau để dự phòng, ví dụ:

/* Sử dụng font Helvetica Neue, nếu trình duyệt hoặc hệ điều hành không hỗ trợ thì chuyển qua font Helvetica, Arial hoặc sans-serif */
p {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

Tham khảo các bộ web safe fonts (sử dụng trên mọi trình duyệt)
http://www.w3schools.com/cssref/css_websafe_fonts.asp

- Với các website nhiều chữ (tin tức, blog, ...) thì nên sử dụng font họ Sans-Serif, là font chữ không chân (không có gạch ngang ở dưới chân ký tự), dùng font chữ này sẽ dễ đọc hơn.

- Ngoài các font cung cấp sẵn chúng ta cũng có thể sử dụng font bên ngoài bằng cách dùng CSS @font-face. Ví dụ:

/* Định nghĩa 1 font tên là robin, trỏ đường dẫn đến file font là special_font.woff */
@font-face {
    font-family: robin;
    src: url(special_font.woff);
}

/* Thay đổi font cho thẻ p */
p {
    font-family: robin;
}

Chú ý là đặt tên font có thể chứa dấu cách, khi đó chúng ta phải bao lại bởi cặp ngoặc kép.

- Một font có thể có nhiều định dạng khác nhau, mỗi trình duyệt lại hỗ trợ các kiểu định dạng khác nhau. Do đó nếu import font từ bên ngoài, chúng ta nên import nhiều định dạng để trang web hiển thị tốt trên các trình duyệt khác nhau. Ví dụ: 

@font-face {
  font-family: "my font";
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Tham khảo các định dạng font và trình duyệt hỗ trợ: http://www.w3schools.com/css/css3_fonts.asp

- Sử dụng Google font:

• Truy cập vào trang https://www.google.com/fonts, chọn kiểu font, kiểu style mong muốn rồi bấm quick-use
• Chọn tiếp các options phù hợp rồi copy code vào trang web theo 1 trong 3 cách: sử dụng thẻ <link> trong HTML, @import trong CSS hoặc dùng Javascript (bước 3). Chú ý khi sử dụng @import trong CSS (dùng để nhúng CSS từ file này sang file khác) thì @import phải ở trên cùng, trước khi có style xuất hiện (thường ở ngày dòng đầu tiên của file) và không khuyến khích dùng nhiều import (http://stackoverflow.com/questions/10036977/best-way-to-include-css-why-use-import)

- Nếu chúng ta có 1 file font, có thể vào trang web sau để convert file đó sang các định dạng khác nhau:
http://www.fontsquirrel.com/tools/webfont-generator