Kinh nghiệm khi khai báo chuỗi phông
Khi lựa chọn phông cho một trang web, nên làm như sau: bắt đầu là phông chữ ưng ý nhất, sau đó là một vài phông tương đương, cuối cùng là họ phông. Ví dụ, nếu muốn hiển thị nội dung bằng kiểu chữ “không có chân” thì sẽ bắt đầu là phông Futura, sau đó là một số phông cùng loại (Univers, Tahoma, Geneva), cuối cùng là họ sans-serif. 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; |
Lab2.2.a (exercise 12-1, p.232, [3])
Kích thước của chữ
Để thiết lập độ lớn của chữ, sử dụng thuộc tính font-size với một số đặc tính sau,
– Giá trị (values): đơn vị đo chiều dài | phần trăm | xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | inherit
– Mặc định: medium
– Áp dụng: cho mọi phần tử
– Kế thừa: có
Để thiết lập kích thước, sử dụng một số cách sau,
– Dùng các đơn vị đo kích thước của CSS, ví dụ:
h1 { font-size: 1.5em; }
Lưu ý: đơn vị đo phải viết liền ngay sau giá trị số, viết như sau là bị lỗi,
h1 { font-size: 1.5 em; }
– Dùng giá trị %, thể hiện tỉ lệ (tăng hoặc giảm) so với kích thước phông mặc định hoặc phông kế thừa của phần tử, ví dụ:
h1 { font-size: 150%; }
– Sử dụng các từ khóa kiểu tuyệt đối, như: xx-small, x-small, small, medium, large, x-large, xx-large. Với hầu hết các trình duyệt, medium sẽ tương ứng với kích thước phông mặc định, ví dụ,
h1 { font-size: x-large; }
– Sử dụng các từ khóa kiểu tương đối, như: larger, smaller. Kết quả là chữ sẽ to hơn hoặc nhỏ hơn so với các chữ lân cận. Ví dụ,
strong { font-size: larger; }
Là bộ phông gồm các biểu tượng, dùng để chèn các biểu tượng vào trang web mà không cần dùng tới hình ảnh.
Có hai bộ phông đang được dùng phổ biến là font awesome và fontello. Mỗi bộ phông có ưu và nhược điểm khác nhau. Font awesome chứa nhiều icon nên nặng hơn, fontello cho phép tùy chọn các icon nên nhẹ hơn.
Cách sử dụng fontello,
– Muốn sử dụng phông nào thì bấm vào phông đó để chọn
– Sau khi chọn xong, bấm vào nút Download webfont
– Giải nén tập tin vừa tải về, mở tập tin demo.html để xem các icon vừa được tải về
– Tạo thư mục fontello_1 trong dự án, chép các tập tin trong thư mục font (fontello.eot, fontello.svg, fontello.fft, fontello.woff, fontello.woff2) vào thư mục fontello_1
– Tạo riêng một tập tin fontello.css trong dự án, để tiện sử dụng về sau
[fontello.css]
@font-face {
font-family: 'fontello';
src: url('../fonts/fontello_1/fontello.eot');
src: url('../fonts/fontello_1/fontello.woff') format('woff'),
url('../fonts/fontello_1/fontello.ttf') format('truetype'),
url('../fonts/fontello_1/fontello.svg') format('svg');
font-weight: normal;
font-style: normal;
}
.icon-facebook:before {
font-family: fontello;
content: '\f30c';
}
.icon-twitter:before{
font-family: fontello;
content: '\f309';
}
Sử dụng trong index.html:
[index.html]
<head>
<link rel="stylesheet" href="css\fontello.css">
</head>
<body>
<a href="" class="icon-facebook"></a>
</body>
Các đơn vị đo kích thước của CSS3 |
CSS3 cung cấp rất nhiều đơn vị đo, chúng được chia thành hai loại: đơn vị đo tương đối (relative), và đơn vị đo tuyệt đối (absolute). Đơn vị đo tương đối Đơn vi đo tương đối là đơn vị đo dựa trên một độ đo khác, ví dụ dựa vào kích thước của chế độ mặc định, hoặc kích thước của phần tử cha. – px: pixel, trong CSS2 đây được xem là đơn vị đo tương đối, vì nó phụ thuộc vào độ phân giải của màn hình (display resolution) – em: tương đương với kích thước của phông hiện hành (phần tử cha) – ex: tương đương với kích thước của chữ “x” – rem: root em, tương đương với em của phần tử root (html) – ch: tương đương với kích thước của số “0” trong phông hiện hành – vw: tương đương với 1/100 độ rộng của cửa sổ trình duyệt (viewport) – vh: tương đương với 1/100 độ cao của cửa sổ trình duyệt (viewport) – vmin: tương đương với 1/100 kích thước cửa sổ trình duyệt (giữa độ rộng và độ cao, cái nào nhỏ hơn thì lấy làm chuẩn) – vmax: tương đương với 1/100 kích thước của cửa sổ trình duyệt (giữa độ rộng và độ cao, cái nào lớn hơn thì lấy làm chuẩn) – %: phần trăm so với kích thước của phần tử cha – fr: là viết tắt của fraction, nghĩa là một phần không gian của container Đơn vị đo tuyệt đối Đơn vị đo tuyệt đối là đơn vị đo có giá trị xác định. Đơn vị đo tuyệt đối ít được sử dụng trong làm web, vì khi kích thước trình duyệt hoặc thiết bị hiển thị có thay đổi, khả năng tùy chỉnh của các độ đo này không linh hoạt. – cm: centimet – mm: minimet – in: inch (1in = 96px = 2.54cm) – pt: point (1pt = 1/72in) – pc: pica (1pc = 12pt) – px: pixel, tương đương 1/96in |
Trong làm web, thường hay sử dụng các đơn vị đo tương đối, ví dụ: %, em, và rem.
%
Ví dụ,
body { font-size: 100%; }
h1 { font-size: 150%; } /* 150% của 16 = 24 */
Phần tử body có kích thước phông là 100% so với phông mặc định của trình duyệt (thường là 16px), phần tử h1 là con của body (do vậy h1 sẽ kế thừa body) và có kích thước phông là 150% so với phần tử cha, kết quả là h1 sẽ có kích thước phông là 24px.
Nếu người dùng thay đổi phông mặc định thành 30px, thì h1 sẽ có kích thước phông là 45px, có nghĩa là vẫn duy trì được tính tỉ lệ giữa phông của h1 so với các thành phần văn bản khác.
em
Như ở trên đã đề cập, một em sẽ tương đương với kích thước của phông hiện hành. Cụ thể hơn, trong kĩ thuật soạn thảo truyền thống, một em sẽ có kích thước đúng bằng độ rộng của chữ M (viết hoa), trong tiếng Anh chữ “m” đọc là “em”. Trong đặc tả của CSS, một em chính là độ cao của một hàng (baseline) (không tính khoảng trắng giữa các hàng). Nếu văn bản có kích thước phông là 16px thì một em sẽ là 16px, nếu phông có kích thước là 12px thì một em sẽ là 12px.
Ví dụ, phần tử body được thiết lập là 100% (tương đương 16px), h1 được thiết lập là 1.5em, vậy h1 sẽ có kích thước là 24px.
body { font-size: 100%; }
h1 { font-size: 1.5em; } /* 1.5 x 16 = 24 */
Khi trình duyệt đã xác định được giá trị của em, thì có thể sử dụng đơn vị đo này cho nhiều mục đích khác, như căn lề, thụt đầu hàng, xác định kích thước cho các phần tử.
Tương tự như độ đo phần trăm (%), sử dụng em giúp duy trì linh hoạt tính cân đối giữa các phần tử.
Kinh nghiệm sử dụng “em” trong thực tế
Giải pháp hay được sử dụng với em là, thiết lập kích thước phông cho phần tử body là 100%, sau đó thiết lập kích thước phông cho các phần tử bên trong dựa theo em. Cách làm này vừa đảm bảo người dùng có được cỡ chữ ưng ý, vừa đảm bảo tính linh hoạt và duy trì tính cân đối về cỡ chữ giữa các thành phần trong văn bản khi có sự thay đổi kích thước phông.
Tuy nhiên, sử dụng em cũng có một số nhược điểm cần chú ý, một là do sự khác biệt khi làm tròn giá trị, nên cùng một giá trị em, nhưng lại có sự khác nhau về độ lớn của chữ giữa các trình duyệt hoặc hệ điều hành; hai là, do giá trị của em được tính dựa vào tính chất kế thừa, vì vậy cũng gây ra khó khăn khi phải xác định giá trị em của phần tử ở các mức khác nhau trong tài liệu HTML.
Ví dụ về cách tính giá trị em, khởi đầu thiết lập cỡ chữ cho phần tử body là 100% (tương đương 16px), sau đó, nếu muốn thiết lập cỡ chữ cho phần tử article là 14px thì chỉ việc lấy 14/16 = 0.875em. Nếu tiếp tục muốn thiết lập cỡ chữ cho phần tử h2 trong article có cỡ chữ là 18px thì sẽ lấy 18/14 = 1.28571429em, vì h2 là con của article nên giá trị em sẽ được tính dựa trên kích thước của phần tử cha, nghĩa là 18px/14px chứ không phải 18px/16px. Giá trị của em có thể làm tròn lên hoặc xuống tới 4 số sau phần thập phân, tuy nhiên điều này là không bắt buộc. Xem đoạn mã ví dụ,
body {font-size: 100%;}
article {font-size: .875em;}
/* dựa trên kích thước kế thừa từ body */
article h2 {font-size: 1.28571429em; }
/* dựa trên kích thước kế thừa từ article */
Px và các đơn vị đo cố định
Mặc dù một số lập trình viên vẫn thích sử dụng đơn vị đo px để thiết lập kích thước phông, lý do họ đưa ra là để kiểm soát chính xác kích thước của các phần tử, tuy nhiên, cách làm này sẽ rất mất thời gian khi phải chỉnh lại kích thước phông của các phần tử. Thử tưởng tượng trong trang web có khoảng 20 loại kích thước văn bản khác nhau, nếu sử dụng đơn vị đo là px, thì sẽ phải chỉnh sửa ở 20 chỗ, trong khi với em, chỉ cần chỉnh sửa ở một chỗ duy nhất.
Vì vậy nên sử dụng đơn vị đo tương đối thay cho các đơn vị đo tuyệt đối, không chỉ có px mà còn là pt, pc, in, mm, cm.
Rem
Sử dụng đơn vị đo là em có khá nhiều ưu điểm, tuy nhiên, do việc tính giá trị em phải dựa vào phần tử cha, điều này gây ra bất tiện cho lập trình viên khi tài liệu HTML gồm nhiều cấp. Để khắc phục nhược điểm này, có thể sử dụng đơn vị đo khác là rem.
Rem là viết tắt của “root em”. Một rem sẽ tương đương với kích thước phông của phần tử html. Như vậy, nếu thiết lập kích thước cho một phần tử bất kì là rem, nghĩa là kích thước của phần tử đó sẽ được tính theo kích thước của phần tử html chứ không phải phần tử cha của nó.
Ví dụ,
html {font-size: 100%;}
article {font-size: .75rem;}
Đơn vị đo là các từ khóa
Cũng có thể thiết lập kích thước của phông bằng các từ khóa, có hai loại từ khóa: tuyệt đối và tương đối.
– Các từ khóa tuyệt đối gồm: xx-small, x-small, small, medium, large, x-larg, xx-large. Các từ khóa này không có đơn vị đo cụ thể, trong đó medium sẽ tương đương với kích thước mặc định của trình duyệt. Ưu điểm của việc sử dụng từ khóa là: trình duyệt sẽ đảm bảo kích thước của phông sẽ không nhỏ hơn 9px, điều này giúp người dùng dễ dàng đọc được nội dung. Nhược điểm là: các trình duyệt không thống nhất trong việc xác định tỉ lệ phóng to, thu nhỏ giữa mỗi mức, có trình duyệt là 120%, có trình duyệt lại là 150%.
– Các từ khóa tương đối gồm: smaller, larger. Với các nội dung không yêu cầu kích thước phông phải chính xác thì có thể sử dụng hai từ khóa này để thay đổi phông chữ một cách tương đối (lớn hơn, hoặc nhỏ hơn) so với phần tử cha của nó. Tuy nhiên, mức độ lớn hơn hoặc nhỏ hơn hoàn toàn phụ thuộc vào mỗi trình duyệt, lập trình viên không thể kiểm soát được giá trị này.
Lab2.2.b (exercise 12-2, p.238, [3])
.jpg)
.jpg)
){kind=link}
0 Nhận xét