Điện thoại: 0944210999
Thực ra thế giới web không dùng nhiều font, bạn sẽ bất ngờ khi biết có khoảng 100 ngàn các loại font chữ khác nhau, nhưng hàng tỷ trang web mà chúng ta thấy ngày nay vẫn chỉ dùng khoảng 10 font phổ biến - còn gọi là font web an toàn (web safe font).
Danh sách các font web an toàn
Bao gồm:
- Arial
- Time New Roman
- Georgia
- Tahoma
- Verdana
- Trebuchet MS
- Courier New
- Comic Sans MS
- IMPACT
Giờ đây mọi chuyện được giải quyết thật đơn giản, người thiết kế chỉ cần đưa font độc đáo của mình lên host của trang web. Khi người dùng duyệt web, họ sẽ tải font về (giống như tải ảnh vậy) và xem được các hiệu ứng font lạ mắt trên trang web.
Nhúng font bằng @font-face trong CSS đã mở bung sức sáng tạo của nhà thiết kế, kết hợp với các khả năng của CSS3, typography trên web đã lên một tầm cao mới.
Code mẫu nhúng font
Đoạn code sau đây được đưa vào file CSS, đừng lo nếu bạn không hiểu luôn, ngay phía dưới có phần giải thích chi tiết:
font-family:font_strong;
src:url('../fonts/Captureit.ttf') format('truetype'),
url('../fonts/Captureit.eot#iefix') format('embedded-opentype'),
url('../fonts/Captureit.woff') format('woff');
font-weight:normal;
font-style:normal;
}
Với code trên thì cấu trúc thư mục trang web của bạn phải giống như hình sau:
Đây là cấu trúc mà đa số mọi người thường dùng, trong đó các file html ở bên ngoài, và từng phần chuyên biệt có thư mục riêng như css để chứa các file CSS, fonts để chứa các Fonts lạ mắt của chúng ta...
Giải thích code
- Dòng đầu tiên: font-family:font_strong là tên mà ta muốn đặt cho font mình nhúng, bạn đặt tên như thế nào là tùy ý bạn.
- Dòng thứ hai src:url('../fonts/Captureit.ttf') đây là nguồn dẫn của font. Bạn chú ý 2 dấu chấm và thanh xuộc. Đường dẫn sai thì chắc chắn sẽ không lên cho nên phần này phải đặc biệt chú ý thật chính xác. format('truetype') là định dạng của font, đuôi .ttf là truetype
- Các dòng tiếp theo url('../fonts/Captureit.eot#iefix') format('embedded-opentype') url('../fonts/Captureit.woff') format('woff'); cũng tương tự, chỉ khác đây là định dạng font khác. Nếu bạn chỉ có font .ttf thì chạy trên Google Chrome và FireFox thì được nhưng sẽ không chạy được trên IE. Để chạy được trên IE phải có font dạng .eot
- font-weight:normal; font-style:normal; nghĩa là mình để font ở dạng thường (regular)
.title {
font-family:font_strong;
}
font-family:font_strong;
}
Trình duyệt hỗ trợ
Tất cả các trình duyệt phổ thông gồm Chrome, FireFox, Opera, Safari và IE đều hỗ trợ nhúng font, tuy nhiên loại font mà chúng support thì có khác nhau.- Internet Explorer 9+, Firefox, Chrome, Safari và Opera hỗ trợ WOFF (Web Open Font Format) font.
- Firefox, Chrome, Safari và Opera cũng hỗ trợ TTF (True Type Fonts) và OTF (OpenType Fonts).
- Chrome, Safari và Opera hỗ trợ SVG fonts/shapes.
- Internet Explorer hỗ trợ EOT (Embedded OpenType) fonts.
Nhúng font trực tuyến
Cái này vừa có điểm giống với @font-face mà cũng vừa khác nữa:
- Giống ở chỗ, font sử dụng đều tải từ nơi khác về, và được dự trù là không có trên máy người dùng
- Khác ở chỗ, @font-face là tải từ host của bạn, trong khi nhúng font trực tuyến thì tải từ server dịch vụ riêng
Hôm nay tôi sẽ giới thiệu với các bạn cách nhúng font bằng Google Font, ưu điểm:
- Nhanh, đảm bảo: Vâng, vì nó là host của Google, nên tốc độ ổn định, hầu như không bị hỏng hóc, nên bạn có thể an tâm gần như 100%
- Miễn phí: Bạn không phải mất tiền để sử dụng dịch vụ này. Thêm vào đó bạn cũng giúp giảm băng thông cho host của bạn
- Đơn giản: Code nhúng của nó thậm chí còn đơn giản hơn @font-face. Kết quả demo bạn có thể xem ngay ở dưới.
Blog Mang Luoi Toan Cau - Nguyen Duc Anh
Cách làm:
- Truy cập trang web http://www.google.com/fonts để chọn font mà bạn thích. Sau đó nhấn vào hình mũi tên trỏ (Quick-use)
- Một cửa sổ bật ra, và Google cho bạn đoạn code để đưa vào trong thẻ head của trang HTML (nó gần giống với liên kết CSS), code đó có dạng như sau: <link href='http://fonts.googleapis.com/css?family=Ruge+Boogie' rel='stylesheet' type='text/css'>
- Bạn có thể thấy tên font trong ví dụ này là Ruge Boogie, tiếp theo, muốn sử dụng font này, thì trong CSS, bạn viết như sau: body {font-family: 'Ruge Boogie', cursive;font-size:20px;}
- Như vậy là đã xong rồi, rất đơn giản phải không. Thông tin thêm là Google Font có khoảng hơn 600 font, nhưng font tiếng Việt thì không nhiều lắm
Một số lưu ý:
- Google Font có đến 3 kiểu nhúng: tiêu chuẩn là kiểu link ở trên, thứ hai là @import và cuối cùng là dùng JavaScript - cả 3 đều cho kết quả tương đương nhau, nhưng kiểu đầu tiên được khuyên dùng
- Nếu muốn đồng bộ hóa font trên Google Font với Desktop hãy sử dụng tiện íchSkyFonts
- Lời cuối: hãy thận trọng với nhúng font, đừng nhúng quá nhiều font khác nhau, vì nhúng font nghĩa là người dùng phải tải font về, nhúng các font quá nặng chắc chắn làm tăng thời gian tải trang, cái này là áp dụng chung chứ không riêng gì cho Google Font
Trả lời câu hỏi phụ (Mà cũng có khi là chính)
- Tôi có thể tìm font độc và lạ ở đâu? => Trên mạng có rất nhiều trang web cung cấp font miễn phí cho phép bạn tải về. Bạn không nên tải font có phí bất hợp pháp vì nó có thể làm ảnh hưởng rất xấu đến trang web của bạn nếu chủ sở hữu font khởi kiện. Nhiều font miễn phí chất lượng tương đương thì tội gì chúng ta tải lậu đúng không ạ? Bạn có thể vào trang http://www.dafont.com/ để tìm font ưa thích nhé.
- Font đẹp cho tiếng Việt có nhiều không? => Đáng tiếc là không! Bạn có khá ít lựa chọn độc đáo với tiếng Việt. Ở phía ngược lại, tiếng Anh và các ngôn ngữ châu Âu nói chung lại rất phong phú.
- Tại sao tôi nhúng mãi font mà chẳng được, trình duyệt lởm rồi, bực mình quá! => Bạn nên dùng Google Chrome hoặc FireFox để kiểm tra nhúng thành công hay chưa. Cả 2 trình duyệt này mà không thành công thì là tại bạn nhúng sai chứ không phải tại trình duyệt. Lỗi không nhúng được font, 10 người thì 9 người là do sai đường dẫn ở cái src: url('đường dẫn font'). Nếu Font nhúng để cùng cấp với file HTML đường dẫn sẽ khác với Font nhúng bạn để ở trong thư mục Font riêng. Mình từng bị rồi, không biết thế là loay hoay cả tiếng!
- Tôi có mỗi font định dạng .ttf, làm sao để tôi có định dạng .eot cho ông bạn IE bây giờ? => Giống như video có thể chuyển đổi (convert) định dạng, font cũng vậy. Bạn có thể search trên mạng hoặc vô trang này để chuyển đổi:http://www.fontsquirrel.com/tools/webfont-generator
- Tôi thấy vài font rất đẹp trên một số trang web, tôi muốn dùng mấy font đó nhưng không biết thông tin về nó, vậy tôi phải làm gì? => Để tìm một font nào đó thì cách đơn giản nhất là biết tên của font, rồi google để tải về. Có một tiện ích mở rộng cho trình duyệt Google Chrome tên là WhatFont giúp bạn làm được điều đó. Địa chỉ ở đây. Cách sử dụng rất đơn giản, bạn chỉ cần di chuột qua chữ cần biết font, nó sẽ thông báo tên font cho bạn, ngoài ra bạn sẽ biết thêm các thông tin khác như kích cỡ, line height và màu chữ đang dùng.
-----------------------------
THÊM FONT LẠ VÀO WEBSITE
Thông thường việc thiết kế web bị giới hạn bởi ngân hàng font của máy tính, website không thể dùng có font chữ lạ mà chỉ dùng những định dạng phổ biến để tất cả các máy đề có thể xem được website. Vì vậy với công nghệ cũ ta phải nhúng java vào hoặc bó tay đành phải chịu với những mẫu font cơ bản nhàm chán. Với kỹ thuật mới của HTML5 và CSS3 chúng ta có thể add những font lạ, đẹp và website mình một cách rất đơn giản.
Để tiến hành thêm font, bạn cần upload font lên host (hoặc bỏ vào thư mục nào đó trong website nếu đang lập trình trong máy). Sau đó thêm vào file css theo cấu trúc như sau:
Ví dụ:
Sử dụng font vừa thêm vào bằng cách:
Như vậy, ta đã có thể thêm được nhiều định dạng font làm cho website trở nên lung linh đẹp mắt rất đơn giản. Chúc các bạn thành công.
Nguồn: Thiết kế web HTML5
0 nhận xét: