Nhúng phông chữ Ubuntu trên bất kỳ trang web nào


Câu trả lời:


25

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-facekhai báo CSS và chuyển đổi phông chữ của bạn theo cách thủ công.

Sử dụng Google Webfont

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 đó:

  1. Mở Thư mục Phông chữ của Google: Trang " Ubuntu - Sử dụng phông chữ này "
  2. Đá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.

    văn bản thay thế

  3. 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".

    văn bản thay thế

  4. 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, SVGhoặ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.

Sử dụng @ font-face

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 .

Cân nhắc

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ữ.


@ DKuntz2 - điều đó thực sự tốt hơn; Bây giờ tôi đã thay đổi câu trả lời của tôi.
dv3500ea

Không hiểu sự cần thiết phải sao chép câu trả lời của sladen. Tại sao không chỉ chỉnh sửa nó?
papukaija

Tôi đã trả lời câu hỏi này một thời gian dài trước khi sladen, phác thảo phương pháp @ font-face. Đây là trước khi phông chữ được thêm vào Google Font API (đây là một phương pháp tốt hơn). Tôi chỉ thêm một ghi chú ngắn vào đầu câu trả lời của mình và sladen đã trả lời toàn diện hơn nhiều và có câu trả lời tốt hơn cho việc sử dụng phương pháp google.
dv3500ea

1
Tuy nhiên, tại thời điểm này, câu trả lời của tôi đã được chấp nhận và được đánh giá cao và kết quả là mọi người có thể nghĩ rằng họ nên sử dụng phương pháp @ font-face ít thích hợp hơn. sladen đã liên lạc với tôi qua email về điều này và tôi đã đồng ý thay đổi câu trả lời của mình, đưa ra sự quy kết theo yêu cầu của giấy phép commons sáng tạo của trang web này.
dv3500ea

10

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 đó:

  1. Mở Thư mục Phông chữ của Google: Trang " Ubuntu - Sử dụng phông chữ này "
  2. Đá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.
  3. 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".
  4. Sao chép và dán hai dòng CSS vào <head> ... </head><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, SVGhoặ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.


8

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 ;-)

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.