Xem xét các giấy phép như:
Làm cách nào tôi có thể sử dụng họ phông chữ Ubuntu trên bất kỳ trang web nào mà không cần người dùng cài đặt nó?
Bất kỳ cơ hội sử dụng nó với các công cụ như: http://code.google.com.vn/intl/en-US/apis/webfonts/
Xem xét các giấy phép như:
Làm cách nào tôi có thể sử dụng họ phông chữ Ubuntu trên bất kỳ trang web nào mà không cần người dùng cài đặt nó?
Bất kỳ cơ hội sử dụng nó với các công cụ như: http://code.google.com.vn/intl/en-US/apis/webfonts/
Câu trả lời:
Có 2 phương pháp mà bạn có thể nhúng phông chữ Ubuntu vào trang web của mình - sử dụng Thư mục Phông chữ của Google (ưu tiên) hoặc sử dụng @font-face
khai báo CSS và chuyển đổi phông chữ của bạn theo cách thủ công.
Bây giờ bạn có thể sử dụng phông chữ Ubuntu làm phông chữ web của Google. Điều này sẽ làm cho quá trình đơn giản hơn rất nhiều. Hầu hết nội dung của phần này của câu trả lời đến từ câu trả lời của sladen .
Tại sao sử dụng Google Font API là phương pháp ưa thích?
Sử dụng Google Font API là một gợi ý tuyệt vời vì nó cho phép các webfont tự động hoạt động trên tất cả các trình duyệt hiện đại mà không phải lo lắng về các chi tiết. Sử dụng API phông chữ có nghĩa là khách truy cập sẽ luôn thấy phiên bản mới nhất của kiểu chữ tự động.
Làm cách nào tôi có thể sử dụng Google Font API?
Kể từ ngày 21 tháng 12 năm 2010, Gia đình Phông chữ Ubuntu hiện được bao gồm và có thể triển khai từ API Phông chữ của Google, hãy truy cập:
Bạn có thể đọc bài đăng trên Google Web Font về tin tức và sau đó:
Đánh dấu sự kết hợp giữa trọng lượng và kiểu dáng từ Thông thường, nghiêng, đậm và đậm-in nghiêng mà bạn cần cho trang web của mình.
Nếu mặc định không chính xác, hãy chọn kết hợp ngôn ngữ / tập lệnh mà bạn cần: một trang web tiếng Nga có ví dụ tiếng Anh có thể sử dụng "Cyrillic, Latin".
Thêm <link>
thẻ đã cho <head> ... </head>
vào giữa trang hoặc mẫu HTML của bạn và thêm mã CSS thích hợp vào giữa <style> ... </style>
các thẻ trong <head>
.
Ví dụ: nếu bạn đang tạo trang web lai tiếng Nga / tiếng Anh và muốn sử dụng phông chữ làm mặc định cho tất cả văn bản, bạn có thể thêm mã sau vào giữa các <head>
thẻ của mình :
<link href='http://fonts.googleapis.com/css?family=Ubuntu&subset=cyrillic,latin' rel='stylesheet' type='text/css' />
<style type="text/css" >
body {
font-family : 'Ubuntu', sans-serif;
}
</style>
Ghi chú :
"Latin" là chữ viết mà tiếng Anh và nhiều ngôn ngữ châu Âu và châu Phi khác được viết bằng.
"Tập hợp" tối ưu hóa các tệp phông chữ bằng cách chỉ gửi các ký tự cho một số ngôn ngữ nhất định, các phông chữ khoảng 44 kB mỗi chữ. Con số 168 kB được hiển thị tại thời điểm này là dành cho tất cả 1.200 glyphs dưới dạng một phông chữ web tải xuống đơn giản và hầu hết không cần thiết cho một trang web.
Các tệp phông chữ Ubuntu được tự động chuyển đổi theo định dạng chính xác cho các trình duyệt khác nhau; tùy thuộc vào thực hiện và phiên bản định dạng yêu cầu là WOFF
, EOT
, SVG
hoặc TTF
. Sự kết hợp đúng của CSS là dành riêng cho từng yêu cầu trang và giải quyết một cách kỳ diệu vấn đề khó khăn này.
Bạn có thể nhúng các phông chữ Ubuntu bằng cách chuyển đổi chúng thành phông chữ WOFF . Sau đó, bạn có thể nhúng chúng bằng cách sử dụng khai báo CSS @ font-face. Các phông chữ (tệp .ttf) có thể được tìm thấy trong /usr/share/fonts/truetype/ubuntu-font-family
.
Ví dụ: để sử dụng phông chữ Thông thường của Ubuntu, được chuyển đổi thành tệp WOFF, Ubuntu-R.woff, hãy sử dụng mã CSS này:
@font-face
{
font-family : "Ubuntu-R";
src: url('Ubuntu-R.woff');
}
Tương tự cho Ubuntu Bold:
@font-face
{
font-family : "Ubuntu";
src: url('Ubuntu-B.woff');
font-weight : bold;
}
Ubuntu in nghiêng:
@font-face
{
font-family : "Ubuntu";
src: url('Ubuntu-I.woff');
font-style : italic;
}
Chữ in nghiêng Ubuntu:
@font-face
{
font-family : "Ubuntu";
src: url('Ubuntu-BI.woff');
font-weight : bold;
font-style : italic;
}
Điều này được hỗ trợ bởi tất cả các trình duyệt gần đây .
Xin nhớ rằng một số người dùng thiết lập trình duyệt của họ để sử dụng một bộ phông chữ cụ thể và có thể gây khó chịu nếu sử dụng phông chữ tùy chỉnh. Ngoài ra, hãy đọc Giấy phép Phông chữ Ubuntu để biết các thuật ngữ chính xác về cách phân phối phông chữ.
Sử dụng Google Font API là một gợi ý tuyệt vời vì nó cho phép các webfont tự động hoạt động trên tất cả các trình duyệt hiện đại mà không phải lo lắng về các chi tiết. Sử dụng API phông chữ có nghĩa là khách truy cập sẽ luôn thấy phiên bản mới nhất của kiểu chữ tự động.
Kể từ ngày 21 tháng 12 năm 2010, Gia đình Phông chữ Ubuntu hiện được bao gồm và có thể triển khai từ API Phông chữ của Google, hãy truy cập:
Bạn có thể đọc bài đăng trên Google Web Font về tin tức và sau đó:
<head> ... </head>
và <style>...</style>
các phần của trang hoặc mẫu HTML của bạn.Ghi chú:
"Latin" là chữ viết mà tiếng Anh và nhiều ngôn ngữ châu Âu và châu Phi khác được viết bằng.
"Tập hợp" tối ưu hóa các tập tin phông chữ bằng cách chỉ gửi các ký tự cho một số ngôn ngữ nhất định, mỗi phông chữ khoảng 44 kB. Con số 168 kB được hiển thị tại thời điểm này là dành cho tất cả 1.200 glyphs dưới dạng một phông chữ web tải xuống đơn giản và hầu hết không cần thiết cho một trang web.
Các tệp phông chữ Ubuntu được tự động chuyển đổi theo định dạng chính xác cho các trình duyệt khác nhau; tùy thuộc vào thực hiện và phiên bản định dạng yêu cầu là WOFF
, EOT
, SVG
hoặc TTF
. Sự kết hợp đúng của CSS là dành riêng cho từng yêu cầu trang và giải quyết một cách kỳ diệu vấn đề khó khăn này.
Kết xuất phông chữ phía máy chủ (có thể là "kết xuất phông chữ động" tốt hơn) đã là một vấn đề thú vị trong một thời gian dài.
Về mặt kỹ thuật, có vẻ hợp lý rằng để một máy hiển thị một phông chữ cụ thể, nó đã được cài đặt cục bộ.
Mặt khác, thiết kế web mất rất nhiều do phải bám vào các 'phông chữ web' cơ bản / nổi tiếng.
CSS2.1 đã thực hiện một số cải tiến bằng cách sử dụng khai báo quy tắc @ font-face .
Nó chưa trở thành một tiêu chuẩn, nhưng cuối cùng nó sẽ có CSS3.
Bên cạnh đó, đã có một vài phương pháp thay thế, như:
Tôi hy vọng các liên kết được cung cấp sẽ cho bạn ý tưởng tốt hơn về những gì có thể được thực hiện ;-)