Hướng dẫn dùng semibold font-weight trong PHP

• Cỡ chữ - font-size
• Kiểu chữ - font-style
• Dày mỏng của chữ font-weight
• Biến đổi chữ với font-variant

Cỡ font chữ với thuộc tính font-size trong CSS

Thuộc tính font-size trong CSS thiết lập cỡ chữ. Các giá trị font-size có thể nhận là:

• Các cỡ chữ tuyệt đối căn cứ theo cỡ chữ mặc định gồm: xx-small, x-small, small, medium, large, x-large, xx-large, xxx-large
• Chỉ ra kích thước theo đơn vị mong muốn như 14px (xem các đơn vị CSS)
• Chỉ ra giá trị phần trăm so với font chữ phần tử cha, như 80%

font-size sử dụng các giá trị tuyệt đối như small, large

Ví dụ có HTML và CSS như sau:

Kết quả: (biên tập code trên để xem thay đổi)

font-size cỡ chữ chỉ rõ theo đơn vị px, em

Bạn có thể chỉ ra cụ thể cỡ chữ với một giá trị theo đơn vị pixel (px) cũng như đơn vị em. Đơn vị em là thiết lập đơn vị theo quan hệ tương đối. Nếu bạn chưa thiết lập cỡ chỡ ở đâu trên trang thì mặc định cỡ chữ là 16px tương đương với 1em

Như vậy để chuyển đổi px sang em dùng công thức: em = pixel/16

h2 {
   font-size: 20px;
}

Tương đương với:

h2 {
   font-size: 1.25em; 
}

font-style kiểu chữ thẳng,chữ nghiêng trong CSS HTML

Thuộc tính font-style trong css dùng để thiết lập kiểu chữ. Với các giá trị:

• normal kiểu chữ bình thường
• italic chữ nghiêng - in nghiêng css
• oblique nghiêng (có thể thiết lập độ nghiêng tuy nhiên tùy thuộc vảo font chữ có thiết lập được không)

Kết quả: (biên tập code trên để xem thay đổi)

font-weight thiết lập độ dày, mỏng của chữ trong HTML CSS

Thuộc tính font-weight trong CSS thiết lập độ dày mỏng (đậm, nhạt) của chữ, nó có thể nhận các giá trị như normal, bold, bolder, lighter hoặc nhận giá trị số từ 1 đến 1000. (400 tương tương normal, 700 tương đương bold - in đậm css).

Kết quả: (biên tập code trên để xem thay đổi)

font-variant để biến đổi font chữ, có thể nhận các giá trị: normal, small-caps

Kết quả: (biên tập code trên để xem thay đổi)

1) Thuộc tính font-weight trong CSS

- Thuộc tính font-weight dùng để thiết lập việc văn bản có được "in đậm" hay không.

- Ví dụ:

2) Cách sử dụng thuộc tính font-weight trong CSS

- Để sử dụng thuộc tính font-weight, ta dùng cú pháp như sau:

font-weight: normal|bold|initial|inherit;

- Trong đó, ta thấy giá trị của thuộc tính font-weight có thể được xác định bởi một trong bốn loại:

Khi chúng ta sử dụng @font-face để nhúng font vào website, mà bản thân font đó có một số weight (độ đậm nhạt, light, bold,…) và style (nghiêng, italic) khác nhau thì CSS của bạn có thể trông rối nếu bạn không định nghĩa những weight và style này trong khai báo (declarations) của @font-face. Không may là một số hướng dẫn và các dịch vụ nhúng font lại không làm tốt điều này.

Khao báo nhiều tên font-family cho cùng một kiểu font sẽ làm CSS của bạn trở nên phức tạp

OK, giờ chúng ta sẽ xem vấn đề này là gì. Ví dụ như bạn muốn sử dụng kiểu font Droid Serif và tự host nó trên máy chủ của bạn. Một tùy chọn dễ dàng là lấy bộ kit @font-face dùng được luôn từ Font Squirrel. Mã CSS trong bộ kit trông giống như thế này (nhiều khai báo src đã được xóa để tiết kiệm không gian):

@font-face {
	font-family: 'DroidSerifRegular';
	src: url('DroidSerif-Regular-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'DroidSerifItalic';
	src: url('DroidSerif-Italic-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'DroidSerifBold';
	src: url('DroidSerif-Bold-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'DroidSerifBoldItalic';
	src: url('DroidSerif-BoldItalic-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

Với CSS ở trên, từng font name riêng biệt được khai báo cho từng weight và style, làm bạn buộc phải viết CSS giống như thế này:

body { font-family:"DroidSerifRegular", Georgia, serif; }

h2 {
	font-family:"DroidSerifBold", Georgia, serif;
	font-weight:normal;
}

em {
	font-family:"DroidSerifItalic", Georgia, serif;
	font-weight:normal;
	font-style:normal;
}

strong em {
	font-family:"DroidSerifBoldItalic", Georgia, serif;
	font-weight:normal;
	font-style:normal;
}

Mỗi khi bạn cần một style khác, bạn sẽ phải reset lại style mặc định về normal để ngăn các trình duyệt áp dụng style đậm và nghiêng giả ở font mà nó đã tải xuống. Điều này không chỉ làm cho CSS của bạn khó sử dụng – nó còn loại bỏ chữ in đậm và in nghiêng trong các trình duyệt không hỗ trợ @font-face hoặc trong trường hợp tệp font bị tải xuống không đúng cách.

Sử dụng cùng tên font-family làm cho mọi thứ trở nên đơn giản hơn và đem lại khả năng dự phòng

Bằng cách thay đổi khai báo font-weight và font-style cho từng quy tắc @font-face để phù hợp với thuộc tính của font, và sử dụng cùng tên cho tên font-family cho từng rule, chúng ta sẽ không bao giờ cần phải quá chi tiết trong CSS của mình nữa.

Khai báo nên được thực hiện như sau:

@font-face {
	font-family: 'DroidSerif';
	src: url('DroidSerif-Regular-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'DroidSerif';
	src: url('DroidSerif-Italic-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: 'DroidSerif';
	src: url('DroidSerif-Bold-webfont.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'DroidSerif';
	src: url('DroidSerif-BoldItalic-webfont.ttf') format('truetype');
	font-weight: bold;
	font-style: italic;
}

Giờ bạn có thể chỉ định font-weight:bold hoặc font-style:italic cho bất cứ thành phần nào bạn muốn mà không cần phải chỉ định font-family cụ thể hoặc ghi đè font-weight và font-style.

body { font-family:"DroidSerif", Georgia, serif; }

h2 { font-weight:bold; }

em { font-style:italic; }

strong em {
	font-weight:bold;
	font-style:italic;
}

Một lợi ích khác là: trong trường hợp @font-face không được hỗ trợ hoặc file font không tải về thành công, trình duyệt sẽ có dự phòng.

(Lược dịch từ bài viết của tác giả Roger Johansson trên trang 456bereastreet)