Nếu đã dùng qua Android 4 (ICS - Ice Cream Sandwich) chắc hẳn các bạn đã biết đến font Roboto, không những chỉ có trên ICS, một số nhà phát triển cũng đã thêm font này vào trong rom không chính thức của mình ở những phiên bản Android thấp hơn.Google cũng đã phát hành và cho phép các nhà phát triển tải font này về từ rất lâu, để có thể dùng font này trên máy tính, bạn có thể truy cập vào địa chỉ sau rồi tải về:
http://developer.android.com/design/style/typography.html
Vậy còn webfont thì sao?
Google hiện cũng có một bộ sưu tập hơn 500 (hiện tại là 501) webfont để sử dụng cho web, tuy nhiên số lượng web font hỗ trợ tiếng Việt còn rất ít, chỉ có 4/501 webfont trong bộ sưu tập của Google webfont có hỗ trợ tiếng Việt, còn lại thì hoàn toàn không.Roboto webfont cũng đã được FontSquirrel cung cấp miễn phí tại:
http://www.fontsquirrel.com/fonts/robotoTuy nhiên, vẫn còn 1 giới hạn là bạn phải tải về sau đó upload lên host của mình mới có thể sử dụng được, có một chút bất tiện và cũng ảnh hưởng kha khá đến tốt độ tải website của bạn.
Giải pháp lưu trữ webfont trên Google Code
Ban đầu, với ý định sẽ sử dụng Google AppEngine để lưu trữ bộ webfont của Roboto trên đó, tuy nhiên, bản miễn phí giới hạn 1GB băng thông mỗi ngày, do đó rất khó lòng để sử dụng rộng rãi khi chỉ có 1GB băng thông.Vò đầu bứt óc chợt vô tình phát hiện ra Google Code, mình đã xem khá kỹ hướng dẫn và FAQ và không thấy nói nhiều đến băng thông, còn lưu trữ thì được miễn phí đến 4GB, quá nhiều khi bộ webfont này chỉ cần có khoảng 3MB.Một số ưu điểm của Google Code:
- Sử dụng proxy của Google nên sẽ truy cập nhanh hơn rất nhiều.
- Băng thông không thấy nhắc đến nên mình nghĩ có lẽ là... không giới hạn.
Cách sử dụng Roboto webfont
Cách sử dụng Roboto webfont cũng khá đơn giản, đơn giản như với Google Webfont vậy. Để thêm font vào website của mình, bạn có thể sử dụng thẻ <link> (nằm giữa thẻ <head></head>) hoặc dùng @import nếu bạn không thể chỉnh sữa file html. Thêm web font Roboto với thẻ <link>Để thêm toàn bộ webfont của Roboto, bạn có thể thêm mã sau vào giữa thẻ <head> và </head> trên website của mình
<link href="http://roboto-webfont.googlecode.com/files/Roboto.css" rel="stylesheet" type="text/css">Thêm web font Roboto vào file CSS (stylesheet) với @importTrong trường hợp bạn không thể can thiệp vào mã nguồn của website để thêm thẻ <link>, chúng ta vẫn còn cách khác đó là dùng @import để import file này vào file CSS của bạn.
@import url(http://roboto-webfont.googlecode.com/files/Roboto.css');Sử dụng web font Roboto thay thế cho font mặc địnhĐể thay thế font Roboto cho font mặc định, bạn tìm đến body trong CSS, thêm vào đoạn sau ở giữa dấu ngặc { và }, thẻ body của CSS sẽ có dạng:
body { font-family: 'Roboto', serif; }Nếu như tất cả những cách trên mà vẫn khiến website của bạn bị lỗi thì bạn tương thẳng đoạn CSS này vào file CSS của bạn. Mình đảm bảo 100% là sẽ thành công và site của bạn hiện font Roboto Condensed sẽ không bị lỗi nữa.
@font-face {Bộ web font này bao gồm: Roboto, Roboto Black, Roboto Condensed, Roboto Light, Roboto Thin, Roboto Medium, bạn có thể thay thế 'Roboto' ở trên bằng một trong những tên này để có được webfont ưng ý cho website của mình. Chúc các bạn thành công
font-family: 'Roboto';
src: local('Roboto'), url('https://roboto-webfont.googlecode.com/files/Roboto-Regular-webfont.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Roboto';
src: local('Roboto'), url('https://roboto-webfont.googlecode.com/files/Roboto-Italic-webfont.woff') format('woff');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'Roboto';
src: local('Roboto'), url('https://roboto-webfont.googlecode.com/files/Roboto-Bold-webfont.woff') format('woff');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Roboto';
src: local('Roboto'), url('https://roboto-webfont.googlecode.com/files/Roboto-BoldItalic-webfont.woff') format('woff');
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: 'Roboto Condensed';
src: local('Roboto Condensed'), url('https://roboto-webfont.googlecode.com/files/Roboto-Condensed-webfont.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Roboto Condensed';
src: local('Roboto Condensed'), url('https://roboto-webfont.googlecode.com/files/Roboto-CondensedItalic-webfont.woff') format('woff');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'Roboto Condensed';
src: local('Roboto Condensed'), url('https://roboto-webfont.googlecode.com/files/Roboto-BoldCondensed-webfont.woff') format('woff');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Roboto Condensed';
src: local('Roboto Condensed'), url('https://roboto-webfont.googlecode.com/files/Roboto-BoldCondensedItalic-webfont.woff') format('woff');
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: 'Roboto Thin';
src: local('Roboto Thin'), url('https://roboto-webfont.googlecode.com/files/Roboto-Thin-webfont.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Roboto Thin';
src: local('Roboto Thin'), url('https://roboto-webfont.googlecode.com/files/Roboto-ThinItalic-webfont.woff') format('woff');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'Roboto Light';
src: local('Roboto Light'), url('https://roboto-webfont.googlecode.com/files/Roboto-Light-webfont.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Roboto Light';
src: local('Roboto Light'), url('https://roboto-webfont.googlecode.com/files/Roboto-LightItalic-webfont.woff') format('woff');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'Roboto Medium';
src: local('Roboto Medium'), url('https://roboto-webfont.googlecode.com/files/Roboto-Medium-webfont.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Roboto Medium';
src: local('Roboto Medium'), url('https://roboto-webfont.googlecode.com/files/Roboto-MediumItalic-webfont.woff') format('woff');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'Roboto Black';
src: local('Roboto Black'), url('https://roboto-webfont.googlecode.com/files/Roboto-Black-webfont.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Roboto Black';
src: local('Roboto Black'), url('https://roboto-webfont.googlecode.com/files/Roboto-BlackItalic-webfont.woff') format('woff');
font-weight: 400;
font-style: italic;
}
Không có nhận xét nào:
Đăng nhận xét