Thứ Năm, 26 tháng 12, 2013
CSS Fonts
Các thuộc tính font CSS xác định gia đình font chữ, sự táo bạo, kích thước, và phong cách của một văn bản.
Sự khác biệt giữa Serif và Sans-serif Fonts
Gia đình CSS Font
Trong CSS, có hai loại tên font:
- chung gia đình - một nhóm các gia đình font chữ với một cái nhìn tương tự (như "Serif" hoặc "Monospace")
- font - một gia đình font cụ thể (như "Times New Roman" hoặc "Arial")
| Generic family | Font family | Description |
|---|---|---|
| Serif | Times New Roman Georgia | Serif fonts have small lines at the ends on some characters |
| Sans-serif | Arial Verdana | "Sans" means without - these fonts do not have the lines at the ends of characters |
| Monospace | Courier New Lucida Console | All monospace characters have the same width |
 | Lưu ý: Trên màn hình máy tính, phông chữ sans-serif được xem là dễ đọc hơn so với phông chữ serif. |
|---|
Họ Phông chữ
Gia đình font chữ của một văn bản được thiết lập với các tài sản font-family.
Tài sản font-family nên giữ một số tên font chữ như là một hệ thống "dự phòng". Nếu trình duyệt không hỗ trợ phông chữ đầu tiên, nó sẽ cố gắng font tiếp theo.
Bắt đầu với các phông chữ mà bạn muốn, và kết thúc với một gia đình chung, để cho trình duyệt chọn một phông chữ tương tự như trong các gia đình chung, nếu không có phông chữ khác có sẵn.
Lưu ý : Nếu tên của một gia đình font chữ là nhiều hơn một từ, nó phải được trong dấu ngoặc kép, như: "Times New Roman".
Nhiều gia đình phông chữ được quy định trong một danh sách bằng dấu phẩy:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
p.serif{font-family:"Times New Roman",Times,serif;}
p.sansserif{font-family:Arial,Helvetica,sans-serif;}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="serif">This is a paragraph, shown in the Times New Roman font.</p>
<p class="sansserif">This is a paragraph, shown in the Arial font.</p>
</body>
</html>
Thử nó cho mình »
Font Style
Tài sản font-phong cách chủ yếu được sử dụng để xác định văn bản in nghiêng.
Khách sạn này có ba giá trị:
- bình thường - Các văn bản được hiển thị bình thường
- nghiêng - Các văn bản được hiển thị bằng chữ in nghiêng
- xiên - Các văn bản được "nghiêng" (xiên là rất tương tự như nghiêng, nhưng ít được hỗ trợ)
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
</style>
</head>
<body>
<p class="normal">This is a paragraph, normal.</p>
<p class="italic">This is a paragraph, italic.</p>
<p class="oblique">This is a paragraph, oblique.</p>
</body>
</html>
Thử nó cho mình »
Font Size
Tài sản font-size thiết lập kích thước của văn bản.
Có khả năng quản lý kích thước văn bản rất quan trọng trong thiết kế web. Tuy nhiên, bạn không nên sử dụng điều chỉnh cỡ chữ để đoạn văn giống như tiêu đề, hoặc tiêu đề giống như đoạn văn.
Luôn luôn sử dụng các thẻ HTML thích hợp, như <h1> - <h6> cho tiêu đề và <p> cho đoạn văn.
Giá trị font-size có thể là một kích thước tuyệt đối, hoặc người thân.
Kích thước tuyệt đối:
- Thiết lập văn bản đến một kích thước quy định
- Không cho phép người dùng thay đổi kích thước văn bản trong tất cả các trình duyệt (xấu vì lý do tiếp cận)
- Kích thước tuyệt đối là hữu ích khi kích thước vật lý của sản lượng được biết đến
Kích thước tương đối:
- Đặt kích thước liên quan đến các yếu tố xung quanh
- Cho phép người dùng thay đổi kích thước văn bản trong các trình duyệt
| Lưu ý: Nếu bạn không chỉ định kích thước font chữ, kích thước mặc định cho văn bản bình thường, như đoạn văn, là 16px (16px = 1em). |
|---|
Thiết lập cỡ chữ Với Pixels
Thiết lập kích thước văn bản với các điểm ảnh mang đến cho bạn toàn quyền kiểm soát kích thước văn bản:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Specifying the font-size in px allows Internet Explorer 9, Firefox, Chrome, Opera, and Safari to resize the text.</p>
<p><b>Note:</b> This example does not work in IE, prior version 9.</p>
</body>
</html>
Thử nó cho mình »
Ví dụ trên cho phép Internet Explorer 9, Firefox, Chrome, Opera, Safari và thay đổi kích thước văn bản.
Lưu ý: Ví dụ trên không làm việc trong IE, trước khi phiên bản 9.
Các văn bản có thể được thay đổi kích thước trong tất cả các trình duyệt bằng cách sử dụng công cụ Zoom (tuy nhiên, điều này thay đổi kích thước toàn bộ trang, không chỉ là văn bản).
Thiết lập cỡ chữ Với Em
Để tránh vấn đề thay đổi kích thước với phiên bản cũ của trình duyệt Internet Explorer, nhiều nhà phát triển sử dụng em thay vì các điểm ảnh.
Đơn vị kích thước em là khuyến cáo của LTTT.
1em bằng với kích thước phông chữ hiện hành. Kích thước văn bản mặc định trong các trình duyệt là 16px. Vì vậy, kích thước mặc định của 1em là 16px.
Kích thước có thể được tính từ điểm ảnh để em sử dụng công thức này: pixels / 16 = em
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Specifying the font-size in em allows all major browsers to resize the text.
Unfortunately, there is still a problem with older versions of IE. When resizing the text, it becomes larger/smaller than it should.
</p>
</body>
</html>
Thử nó cho mình »
Trong ví dụ trên, kích thước văn bản trong em là tương tự như ví dụ trước trong pixel. Tuy nhiên, với kích thước em, nó có thể điều chỉnh kích thước văn bản trong tất cả các trình duyệt.
Thật không may, vẫn còn là một vấn đề với các phiên bản cũ hơn của IE. Văn bản trở nên lớn hơn nó nên khi thực hiện lớn hơn và nhỏ hơn so với nó nên khi làm nhỏ hơn.
Sử dụng một sự kết hợp của phần trăm và Em
Các giải pháp hoạt động trong tất cả các trình duyệt, là để thiết lập mặc định font-size theo phần trăm cho các phần tử body:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Specifying the font-size in percent and em displays the same size in all
major browsers, and allows all browsers to resize the text!</p>
</body>
</html>
Thử nó cho mình »
Mã của chúng tôi hiện đang làm việc tuyệt vời! Nó cho thấy kích thước văn bản giống nhau trong tất cả các trình duyệt, và cho phép tất cả các trình duyệt để phóng to hoặc thay đổi kích thước văn bản!
Đăng ký:
Đăng Nhận xét (Atom)
Không có nhận xét nào:
Đăng nhận xét