[CSS] Bài 6: Font chữ for Website

Trong bài trước chúng ta đã học về cách tạo màu nền ảnh nền bằng cách sử dụng thuộc tính Background hôm nay chúng ta sẽ học về các thuộc tính CSS liên quan đến font chữ của các thành phần trong trang web.

1 Tổng Quát:

5 thuộc tính của Font mà bạn cần biết đó là:

• font-family: định nghĩa danh sách font sẽ hiển thị cho trang web.
• font-style: xác định loại chữ.
• font-size: định dạng cỡ chữ.
• font-variant: định dạng một số kiểu chử.
• font-weight: định dạng kiểu in

2. Thuộc tính Font-Family:

Thuộc tính font-family có công dụng định nghĩa một danh sách ưu tiên các font sẽ được dùng để hiển thị một thành phần trang web. Theo đó, thì font đầu tiên được liệt kê trong danh sách sẽ được dùng để hiển thị trang web. Nếu như trên máy tính truy cập chưa cài đặt font này thì font thứ hai trong danh sách sẽ được ưu tiên…cho đến khi có một font phù hợp.

Cú Pháp: 

tag {font-family: name font 1, name font 2....name font n}

Có hai loại tên font được dùng để chỉ định trong font-family: family-names (họ theo tên) và generic families (họ chung).
Family-names: Tên cụ thể của một font. Ví dụ: Arial, Verdana, Tohama,…
Generic families: Tên của một họ gồm nhiều font. Ví dụ: sans-serif (không chân), serif (có chân),…

CSS cung cấp 5 loại font chữ như hình bên dưới:

Generic Font Family	Family-names
serif	Georgia, Times, "Times New Roman", Garamond, "Century Schoolbook"
sans-serif	Verdana, Arial, Helvetica, Trebuchet, Tahoma
monospace	Courier, "MS Courier New", Prestige
cursive	"Lucida Handwriting", "Zapf-Chancery"
fantasy	Comic Sans, Whimsy, Critter, Cottonwood

Tất cả các trình duyệt đều có 1 danh sách các font chữ nằm trong 5 loại font family bên trên. Nếu 1 font chữ không được chọn bởi CSS hoặc không có sẵn trên máy tính của bạn thì trình duyệt sẽ tự động chọn 1 font chữ từ những font family bên trên.

Bạn muốn chỉ định những font chữ mà được cài đặt hầu hết trên các máy tính, vì thế mà website của bạn sẽ được hiển thị tốt, không bị mất font chữ. Như thế, bạn phải sử dụng những font chữ mà được hỗ trợ nhiều nhất, những font chữ đó được biết đến như là web-safe font, đây là những font chữ thường được cài đặt trên Windows lẫn Macintosh.
Bên dưới là danh sách font sans serif:

• font-family: Verdana, Geneva, sans-serif;
• font-family: Arial, Helvetica, sans-serif;
• font-family: Tahoma, Geneva, sans-serif;
• font-family: "Trebuchet MS", Area, Helvetica, sans-serif;
• font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

Danh sách font serif:

• font-family: Georgia, "Times New Roman", Times, serif;
• font-family: "Palatino Linotype", "Book Antigua", Palatino, serif;
• font-family: "MS Serif", New York, serif;

Danh sách font monospace

• font-family: "Courier New", Courier, monospace;
• font-family: "Lucida Console", Monaco, monospace;
• Danh sách font cursive font-family: "Comic Sans MS", cursive; 

Ví dụ sau chúng ta sẽ viết CSS để quy định font chữ dùng cho cả trang web là Times New Roman, Tohama, sans-serif, và font chữ dùng để hiển thị các tiêu đề h1, h2, h3 sẽ là Arial, Verdana và các font họ serif.

body { font-family:”Times New Roman”,Tohama,sans-serif }
h1, h2, h3 { font-family:arial,verdana,serif }

Chú ý: Nếu font chữ của bạn có chứa khoảng trắng thì bạn nên dùng dấu nháy đơn hoặc nháy đôi để đóng font chữ đó lại làm 1 cụm từ. Vào cuối danh sách những font chữ bạn đã chọn, nên thêm vào font chữ chung chung để trong trường hợp trình duyệt không thể tìm được những font chữ bạn đã chọn trước đó thì font chữ chung chung đó sẽ được hiển thị lên.

2. Thuộc Tính Font-Style:

Thuộc tính font-style định nghĩa việc áp dụng các kiểu in thường (normal), in nghiêng (italic) hay xiên (oblique) lên các thành phần trang web.

Ví Dụ bên dưới chúng ta sẽ thử thực hiện áp dụng kiểu in nghiêng cho thành phần h1 và
kiểu xiên cho h2.

h1{font-style:italic;} h2 {font-style:oblique;}

3.Thuộc Tính Font-Size:

Thuộc tính font-size dùng để khai báo kích cỡ của chữ của văn bản.
Khả năng quản lý kích thước của chữ là một khâu quan trọng trong thiết kế web. Tuy nhiên bạn không nên điều chỉnh kích thước font chữ để biến đoạn văn bản trông giống như phần headings, hoặc phần headings giống như paragraphs.
Luôn sử dụng thẻ HTML chính xác, ví dụ <h1> - <h6> cho phần headings và thẻ <p> cho phần paragraphs.
Giá trị font-size có thể là giá trị tuyệt đối hoặc giá trị tương đối
Giá trị tuyệt đối :
- Thiết lập văn bản theo một kích cỡ quy định
- Không cho phép người dùng thay đổi kích cỡ text trên mọi trình duyệt
Giá trị tương đối:
- Thiết lập giá trị tương đối cho các phần tử xung quanh.
- Cho phép người dùng thay đổi kích cỡ văn bản trên trình duyệt.
Đơn vị tính font-size được chia thành 2 loại: absolute và relative.
Absolute bao gồm các đơn vị tính sau:

Inches (in)

Centimeters (cm)

Millimeters (mm)

Relative bao gồm các giá trị sau:
Em: giá trị mặc định của font-size trên các trình duyệt.
X-height (ex)
Pixels (px)
Font-size có thể có bất kỳ giá trị nào mà bạn muốn và font-size có nhiều đơn vị tính khác nhau. Việc thiết lập kích thước của font chữ theo tỉ lệ phần trăm làm cho trình duyệt có thể tính toán được kích thước của font chữ phụ thuộc vào kích thước của phần tử cha. Ví dụ, nếu font-size của body là 12 pixel và font-size của thẻ p nằm trong thẻ body được set là 125%, thì font-size của thẻ p đó là 15pixel. Bạn có thể sử dụng phần trăm, inches, centimeters, millimeters … để chỉ định font-size.
Chú ý: Nếu bạn không quy định một kích cỡ font chữ, kích cỡ mặc định cho text thông thường, ví dụ cho paragraphs, là 16px (16px=1em) và font-size không chấp nhận giả trị âm, ví dụ: font-size = -5cm thì không được chấp nhập.
Thiết lập font size chữ bằng Pixels
Sử dụng pixel để quy định kích cỡ chữ của văn bản sẽ cho phép bạn có thể kiểm soát đầy đủ về kích cỡ text:

Ví Dụ:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
 
<h1>Chào mừng bạn</h1>
<h2>Chào mừng bạn</h2>
<p>Chào mừng bạn.</p>
<p>Quy định font-size theo px cho phép các trình duyệt Internet Explorer 9, Firefox, Chrome, Opera, và Safari định lại text.</p>
<p><b>Chú ý:</b> Ví dụ này không hoạt động trên Internet Explorer các phiên bản trước IE9.</p>
 
</body>
</html>

See the Pen %= penName %> by Nguyễn Hữu Trọng (@Rain) on CodePen

Thiết lập Font Size bằng Em
Để tránh gặp các vấn đề về điều chỉnh kích cỡ text trên các phiên bản cũ của Internet Explorer, nhiều lập trình viên sử dụng "em" thay vì dùng pixels. 1em bằng kích cỡ font hiện tại. Kích cỡ text mặc định trên trình duyệt là 16px. Do đó kích cỡ mặc định của 1em là 16px.
Kích cỡ có thể được chuyển đổi từ pixels sang em sử dụng công thức: pixels/16=em

<!DOCTYPE html>
<html>
<head>
</head>
<body>
 
<h1>Đây là ví dụ</h1>
<h2>Đây là ví dụ</h2>
<p>Đây là ví dụ.</p>
<p>Trong một kỷ nguyên mà hacker có thể cuỗm file tuyệt mật của chính phủ và tập đoàn đa quốc gia dễ như trở bàn tay, một câu hỏi không thể không đặt ra trước thềm Bầu cử Mỹ là: Liệu những lá phiếu điện tử có bị đe dọa hay không?.
</p>
</body>
</html>

See the Pen %= penName %> by Nguyễn Hữu Trọng (@Rain) on CodePen

Sử dụng kết hợp Percent và Em
Để có thể làm việc trên tất cả các trình duyệt, thiết lập kích font-size mặc định theo percent (%) đối vơi phần tử <body>

<!DOCTYPE html>
<html>
<head>
</head>
<body>
 
<h1>Sử dụng kết hợp phần trăm và em</h1>
<h2>Sử dụng kết hợp phần trăm và em</h2>
<p>Sử dụng kết hợp phần trăm và em.</p>
<p>Trong một kỷ nguyên mà hacker có thể cuỗm file tuyệt mật của chính phủ và tập đoàn đa quốc gia dễ như trở bàn tay, một câu hỏi không thể không đặt ra trước thềm Bầu cử Mỹ là: Liệu những lá phiếu điện tử có bị đe dọa hay không?!</p>
 
</body>
</html>

See the Pen %= penName %> by Nguyễn Hữu Trọng (@Rain) on CodePen

Khi thiết kế web, bạn muốn font-size phải được nhất quán trên các trình duyệt và các hệ điều hành khác nhau, thì bạn nên sử dụng đơn vị tính là em, và thiết lập các giá trị font-size cho các thẻ lớn như body, input, select, th, td giá trị ban đầu.

Ví Dụ:

body{font-size: 62.5%;}
input, select, th, td{font-size: 1em;}

Bây giời font-size của bạn trên tất cả web page tương đương với 10 pixel cho mỗi 1 em. Ví dụ, bạn muốn thiết lập giá trị cho p là 19px thì bạn viết như sau:

p{font-size: 1.9em /* hiển thị text với 19 pixels */;} 

Font-size keyword: 
Một giải pháp khác cho việc gán giá trị cho font-size là sử dụng keyword như: xx-small, x-small, small, large, x-large, và xx-large.

h2{font-size: x-large;}

Sử dụngFont-size keyword có 2 lợi ích: nó sẽ dễ dàng tăng hoặc giảm kích thước trong hầu hết các trình duyệt, và font-size trong các trình duyệt sẽ không bao giờ nhỏ hơn 9 pixel, điều đó chắc chắn rằng các chữ trên website thì hoàn toàn đọc được. Nếu bạn gán giá trị cho font-size = small, thì bạn nên sử dụng font chữ sans serif như Verdana để tăng tính dễ đọc trên website.
Các trình duyệt thiết lập giá trị mặc định là 16 pixel, tương đương với medium keyword. Bằng cách thiết lập font-size trong thẻ body là 62.5%, thì giá trị mặc định giảm xuống là 10 pixel:
(16 pixel)*62.5% = 10 pixel

Xem Ví Dụ để hiểu rỏ hơn:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <title>Sử dụng font-size keyword</title>
 </head>
<body>
 
    <p class="size-xx-large">
 
        Đây là font-size xx-large</p>
 
    <hr />
 
    <p class="size-x-large">
 
        Đây là font-size x-large</p>
 
    <hr />
 
    <p class="size-large">
 
        Đây là font-size large</p>
 
    <hr />
 
    <p class="size-medium">
 
        Đây là font-size medium</p>
 
    <hr />
 
    <p class="size-small">
 
        Đây là font-size small</p>
 
    <hr />
 
    <p class="size-x-small">
 
        Đây là font-size x-small</p>
 
    <hr />
 
    <p class="size-xx-small">
 
        Đây là font-size xx-small</p>
 
    <hr />
</body>
</html>

See the Pen %= penName %> by Nguyễn Hữu Trọng (@Rain) on CodePen

4.Thuộc tính font-variant:

Thuộc tính font-variant được dùng để chọn giữa chế độ bình thường và small-caps của một font chữ.
Một font small-caps là một font sử dụng chữ in hoa có kích cỡ nhỏ hơn in hoa chuẩn để thay thế những chữ in thường. Nếu như font chữ dùng để hiển thị không có sẵn font small-caps thì trình duyệt sẽ hiện chữ in hoa để thay thế.
Trong ví dụ sau chúng ta sẽ sử dụng kiểu small-caps cho phần h1

<h1> Ví dụ font variant</h1>

See the Pen %= penName %> by Nguyễn Hữu Trọng (@Rain) on CodePen

5. Thuộc Tính Font-weight:

Thuộc tính font-weight mô tả cách thức thể hiện của font chữ là ở dạng bình thường (normal) hay in đậm (bold). Ngoài ra, một số trình duyệt cũng hỗ trợ mô tả độ in đậm bằng các con số từ 100 – 900.
Thử in đậm phần p:

p {font-weight:bold}

6. Thuộc tính font rút gọn:

Cấu trúc rút gọn cho các thuộc tính nhóm font:
Font :<font-style> | < font-variant> | <font-weight> | <font-size> |< font-family>

Cách sử dụng tương tự như thuộc tính background rút gọn nên mình sẽ không nói lại.