Làm cách nào tôi có thể sử dụng phông chữ Roboto của Google trên trang web?

163

Tôi muốn sử dụng phông chữ Roboto của Google trên trang web của mình và tôi đang làm theo hướng dẫn này:

http://www.maketecheasier.com/use-google-roboto-font-everywhere/2012/03/15

Tôi đã tải xuống tệp có cấu trúc thư mục như thế này:

nhập mô tả hình ảnh ở đây

Bây giờ tôi có ba câu hỏi:

  1. Tôi có css trong media/css/main.cssurl của tôi . Vậy tôi cần đặt thư mục đó ở đâu?
  2. Tôi có cần trích xuất tất cả eot, svg vv từ tất cả thư mục con và đặt vào fontsthư mục không?
  3. Tôi có cần tạo tập tin phông chữ css.css và đưa vào tệp mẫu cơ sở của mình không?

Ví dụ anh ấy sử dụng

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-ThinItalic-webfont.eot');
    src: url('Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-ThinItalic-webfont.woff') format('woff'),
         url('Roboto-ThinItalic-webfont.ttf') format('truetype'),
         url('Roboto-ThinItalic-webfont.svg#RobotoThinItalic') format('svg'); (under the Apache Software License). 
    font-weight: 200;
    font-style: italic;
}

Url của tôi trông như thế nào, nếu tôi muốn có cấu trúc thư mục như:

/media/fonts/roboto

html  css  fonts 
— người dùng 26
nguồn

Câu trả lời:

257

Bạn không thực sự cần phải làm bất kỳ điều này.

  • Chuyển đến trang Phông chữ Web của Google
  • tìm kiếm Robototrong hộp tìm kiếm ở trên cùng bên phải
  • Chọn các biến thể của phông chữ bạn muốn sử dụng
  • nhấp vào 'Chọn Phông chữ này' ở trên cùng và chọn trọng lượng và bộ ký tự bạn cần.

Trang này sẽ cung cấp cho bạn một <link>yếu tố để đưa vào các trang của bạn và danh sách các font-familyquy tắc mẫu sẽ sử dụng trong CSS của bạn.

Sử dụng phông chữ của Google theo cách này đảm bảo tính khả dụng và giảm băng thông cho máy chủ của riêng bạn.

— Gạc mặt trời
nguồn
Cảm ơn vì điều đó, thật hoàn hảo. Bạn có biết cài đặt nào google sử dụng cho danh sách phát của họ trong cửa hàng google play. tôi muốn có phong cách chính xác như thế. Ngoài ra tôi không tìm thấy liên kết hoặc đoạn mã trong liên kết. Tôi thấy các phông chữ ở đó nhưng không có mã
— user26
3
Thật tuyệt, họ cũng cung cấp một @import cho các tệp LESS! Tuy nhiên, thử nghiệm kết nối internet HOẶC các sự cố kết nối Google (ví dụ: Trung Quốc) = KHÔNG Phông chữ ... Tôi cũng nhận thấy rằng không có Roboto Black (Roboto Bk) font-family: họ thực sự chỉ sử dụng 3 họ phông chữ (Roboto, Roboto Ngưng tụ và Roboto Slab) tất cả các biến thể Roboto khác được thực hiện thông qua font-stylevà font-weightthay đổi CSS. Vì vậy, lý tưởng, sau khi đặt Google <link>kiểm tra xem các phông chữ có thực sự ở đó không. Nếu không, hãy sử dụng riêng của bạn (btw tải tất cả các tệp từ một họ phông chữ thông thường không vượt quá 0,5 MB).
— Armfoot
7
@ user26 <link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900' rel='stylesheet' type='text/css'>Điều này tải tất cả các kiểu chỉ từ một họ phông chữ: Roboto. Tuy nhiên, nếu bạn cần một họ phông chữ không có trong Google Fonts (chẳng hạn như Roboto Black ), bạn cần các tệp trong thư mục của mình và sao chép mã ví dụ mà bạn đã cho chúng tôi xem trong câu hỏi của bạn vào main.css (như thế này @font-face{font-family: 'Roboto Black';src:url('/media/fonts/roboto/roboto_black_macroman/blablabla.eot; ...etc.hoặc như tôi đã đề xuất trong câu trả lời của tôi).
— Armfoot
14
-1 cho Using Google's fonts this way guaranties availability. Không có gì "đảm bảo tính khả dụng", ít hơn các phông chữ của Google. Tôi tình cờ trở thành một trong số hàng tỷ người sử dụng CDN của Google có nghĩa là hàng tấn trang web không tải đúng cách hoặc hoàn toàn không có. Tôi không nói cho ai biết phải làm gì, nhưng đừng nghĩ CDN của Google là một giải pháp hoàn hảo.
— Nateowami
1
-1. Như @Nateowami đã đề cập, bạn đang dựa vào các máy chủ của Google (có thể bị chặn ở một số quốc gia nhất định), điều đó không tốt cho quyền riêng tư và hiệu suất thực sự có thể tốt hơn nếu bạn tự lưu trữ phông chữ của mình trên CDN. Đó là công việc nhiều hơn nhưng đó là công việc của bạn, phải không?
— Robin Métral
70

Có hai cách tiếp cận mà bạn có thể thực hiện để sử dụng phông chữ web được cấp phép trên các trang của mình:

  1. Các dịch vụ lưu trữ phông chữ như Typekit, Fonts.com, Fontdeck, v.v., cung cấp giao diện dễ dàng cho các nhà thiết kế để quản lý phông chữ đã mua và tạo liên kết đến tệp CSS hoặc JavaScript động phục vụ phông chữ. Google thậm chí còn cung cấp dịch vụ này miễn phí ( đây là một ví dụ cho phông chữ Roboto mà bạn yêu cầu). Typekit là dịch vụ duy nhất cung cấp gợi ý phông chữ bổ sung để đảm bảo phông chữ chiếm cùng các pixel trên các trình duyệt.

    Các trình tải phông chữ JS như trình tải được sử dụng bởi Google và Typekit (tức là trình tải WebFont) cung cấp các lớp CSS và các cuộc gọi lại để giúp quản lý FOUT có thể xảy ra hoặc hết thời gian phản hồi khi tải xuống phông chữ.

    <head>
  <!-- get the required files from 3rd party sources -->
  <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

  <!-- use the font -->
  <style>
    body {
      font-family: 'Roboto', sans-serif;
      font-size: 48px;
    }
  </style>
</head>

  2. Phương pháp DIY liên quan đến việc có được một phông chữ được cấp phép sử dụng web và (tùy chọn) sử dụng một công cụ như trình tạo của FontSquirrel (hoặc một số phần mềm) để tối ưu hóa kích thước tệp của nó. Sau đó, việc triển khai chéo trình duyệt của thuộc tính @font-faceCSS tiêu chuẩn được sử dụng để kích hoạt (các) phông chữ.

    Cách tiếp cận này có thể cung cấp hiệu suất tải tốt hơn vì bạn có quyền kiểm soát chi tiết hơn đối với các ký tự để bao gồm và do đó kích thước tệp.

    /* get the required local files */
@font-face {
  font-family: 'Roboto';
  src: url('roboto.eot'); /* IE9 Compat Modes */
  src: url('roboto.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('roboto.woff') format('woff'), /* Modern Browsers */
  url('roboto.ttf')  format('truetype'), /* Safari, Android, iOS */
  url('roboto.svg#svgFontName') format('svg'); /* Legacy iOS */
}

/* use the font */
body {
  font-family: 'Roboto', sans-serif;
  font-size: 48px;
}

Mẩu chuyện dài:

Sử dụng dịch vụ lưu trữ phông chữ cùng với khai báo @ font-face mang lại đầu ra tốt nhất liên quan đến hiệu suất, tính tương thích và tính khả dụng tổng thể.

Nguồn: https://www.artzstudio.com/2012/02/web-font-performance-weighing-fontface-options-and-alternigin/

CẬP NHẬT

Roboto: Phông chữ ký của Google hiện là nguồn mở

Bây giờ bạn có thể tự tạo các phông chữ Roboto bằng cách sử dụng các hướng dẫn có thể tìm thấy ở đây .

— Ashesh Kumar Singh
nguồn
17

Bài cũ, tôi biết.

Điều này cũng có thể sử dụng CSS @import url :

@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300ita‌​lic,400italic,500,500italic,700,700italic,900italic,900);
html, body, html * {
  font-family: 'Roboto', sans-serif;
}
— đá
nguồn
8
Giải pháp của bạn là một mô hình chống hiệu suất. Sử dụng thẻ liên kết trong đánh dấu của bạn sẽ giúp tải xuống tệp CSS của Google sớm hơn so với @import; trình duyệt chỉ phát hiện ra tài liệu tham khảo tài nguyên nói chung và nói riêng do trình tải trước (trong khi phân tích cú pháp HTML so với lần đầu tiên phân tích HTML, sau đó khám phá tệp CSS của bạn, sau đó tải xuống, sau đó phân tích và khám phá @import, sau đó tải xuống bản định kiểu đã nhập).
— Radko Dinev
3
Không cần thiết. Sử dụng Webpack và plugin, tất cả sẽ được nhúng trong bản dựng phân phối của bạn.
— Spock
5

Các tham chiếu srctrực tiếp đến các tệp phông chữ, do đó, nếu bạn đặt tất cả chúng vào, /media/fonts/robotobạn nên tham khảo chúng trong tệp main.cs của bạn như thế này: src: url('../fonts/roboto/Roboto-ThinItalic-webfont.eot');

Các ..đi một thư mục lên, có nghĩa là bạn đang đề cập đến các mediathư mục nếu main.css là trong /media/cssthư mục.

Bạn phải sử dụng ../fonts/roboto/trong tất cả các tham chiếu url trong CSS (và chắc chắn rằng các tệp nằm trong thư mục này chứ không phải trong các thư mục con, chẳng hạn như roboto_black_macroman).

Về cơ bản (trả lời câu hỏi của bạn):

Tôi có css trong url media / css / main.css của mình. Vậy tôi cần đặt thư mục đó ở đâu

Bạn có thể để nó ở đó, nhưng hãy chắc chắn sử dụng src: url('../fonts/roboto/

Tôi có cần trích xuất tất cả eot, svg vv từ tất cả thư mục con và đặt vào thư mục phông chữ không

Nếu bạn muốn trực tiếp tham khảo các tệp đó (mà không đặt các thư mục con trong mã CSS của bạn), thì có.

Tôi có cần phải tạo tập tin phông chữ css.css và bao gồm trong tệp mẫu cơ sở của tôi không

Không nhất thiết, bạn chỉ có thể bao gồm mã đó trong main.css của mình. Nhưng đó là một cách thực hành tốt để tách phông chữ khỏi CSS tùy chỉnh của bạn.

Dưới đây là ví dụ về tệp phông chữ LESS / CSS mà tôi sử dụng:

@ttf: format('truetype');

@font-face {
  font-family: 'msb';
  src: url('../font/msb.ttf') @ttf;
}
.msb {font-family: 'msb';}

@font-face {
  font-family: 'Roboto';
  src: url('../font/Roboto-Regular.ttf') @ttf;
}
.rb {font-family: 'Roboto';}
@font-face {
  font-family: 'Roboto Black';
  src: url('../font/Roboto-Black.ttf') @ttf;
}
.rbB {font-family: 'Roboto Black';}
@font-face {
  font-family: 'Roboto Light';
  src: url('../font/Roboto-Light.ttf') @ttf;
}
.rbL {font-family: 'Roboto Light';}

(Trong ví dụ này tôi chỉ sử dụng ttf) Sau đó, tôi sử dụng @import "fonts";trong tệp main.less của mình ( ít hơn là một bộ xử lý CSS, nó làm cho mọi thứ như thế này dễ dàng hơn một chút )

— Chân
nguồn
2

Đây là những gì tôi đã làm để có được các tệp woff2 mà tôi muốn triển khai tĩnh mà không phải sử dụng CDN

TEMPORARILY thêm cdn cho css để tải phông chữ roboto vào index.html và để tải trang. từ các công cụ của google dev xem các nguồn và mở rộng nút Font.googleapis.com và xem nội dung của css? Family = Roboto: 300,400.500 & display = hoán đổi tệp và sao chép nội dung. Đặt nội dung này trong một tệp css trong thư mục tài sản của bạn.

Trong tập tin css, loại bỏ tất cả các công cụ Hy Lạp, cryllic và tiếng Việt.

Nhìn vào các dòng trong tệp css này tương tự như:

    src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');

sao chép địa chỉ liên kết và dán nó vào trình duyệt của bạn, nó sẽ tải xuống phông chữ. Đặt phông chữ này vào thư mục tài sản của bạn và đổi tên nó ở đây, cũng như trong tệp css. Làm điều này với các liên kết khác, tôi đã có 6 tệp woff2 độc đáo.

Tôi làm theo các bước tương tự cho các biểu tượng vật chất.

Bây giờ hãy quay lại và nhận xét dòng nơi bạn gọi cdn và thay vào đó sử dụng tệp css mới mà bạn đã tạo.

— Helzgate
nguồn
1

Thử cái này

<style>
@font-face {
        font-family: Roboto Bold Condensed;
        src: url(fonts/Roboto_Condensed/RobotoCondensed-Bold.ttf);
}
@font-face {
         font-family:Roboto Condensed;
        src: url(fonts/Roboto_Condensed/RobotoCondensed-Regular.tff);
}

div1{
    font-family:Roboto Bold Condensed;
}
div2{
    font-family:Roboto Condensed;
}
</style>
<div id='div1' >This is Sample text</div>
<div id='div2' >This is Sample text</div>
— Nhà phát triển chính
nguồn
1

Sử dụng / phông chữ / hoặc / phông chữ / trước tên loại phông chữ trong biểu định kiểu CSS của bạn. Tôi phải đối mặt với lỗi này nhưng sau đó nó hoạt động tốt.

@font-face {
    font-family: 'robotoregular';
    src: url('../fonts/Roboto-Regular-webfont.eot');
    src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
— Mohammed Javed
nguồn
1

Đối với trang web, bạn có thể sử dụng phông chữ 'Roboto' như dưới đây:

Nếu bạn đã tạo tệp css riêng biệt thì đặt dòng bên dưới ở đầu tệp css là:

@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');

Hoặc nếu bạn không muốn tạo tệp riêng biệt thì hãy thêm dòng trên vào giữa <style>...</style>:

<style>
  @import url('https://fonts.googleapis.com/css? 
  family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');
</style>

sau đó:

html, body {
    font-family: 'Roboto', sans-serif;
}
— Ông không ai
nguồn
0

Bạn đã đọc How_To_Use_Webfonts.html trong tệp zip đó chưa?

Sau khi đọc điều đó, có vẻ như mỗi thư mục con phông chữ đã có .css đã được tạo trong đó bạn có thể sử dụng bằng cách bao gồm điều này:

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
— Barry Colebank Jr
nguồn
0

dễ thôi

mỗi thư mục của những người bạn đã tải xuống có một loại phông chữ roboto khác nhau, có nghĩa là chúng là các phông chữ khác nhau

ví dụ: "roboto_THER_macroman"

sử dụng bất kỳ trong số họ:

1- giải nén thư mục của phông chữ bạn muốn sử dụng

2- tải nó lên gần tập tin css

3- bây giờ bao gồm nó trong tập tin css

ví dụ để bao gồm phông chữ được gọi là "roboto_THER_macroman":

@font-face {
font-family: 'Roboto';
src: url('roboto_regular_macroman/Roboto-Regular-webfont.eot');
src: url('roboto_regular_macroman/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.woff') format('woff'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.ttf') format('truetype'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
font-weight: normal;
font-style: normal;
}

theo dõi đường dẫn của các tập tin, ở đây tôi đã tải lên thư mục có tên là "roboto_THER_macroman" trong cùng thư mục có css

sau đó bạn có thể chỉ cần sử dụng phông chữ bằng cách gõ font-family: 'Roboto';

— Omar Moustaha
nguồn
0

Nó thực sự khá đơn giản. Chuyển đến phông chữ trên trang web của Google và thêm liên kết của nó vào đầu mỗi trang bạn muốn bao gồm phông chữ.

0

Dành một giờ, khắc phục các vấn đề về phông chữ.

Câu trả lời liên quan - Dưới đây là dành cho React.jstrang web:

  1. Cài đặt mô-đun npm:

    npm install --save typeface-roboto-mono

  2. nhập tệp .js bạn muốn sử dụng
    một trong các cách sau :

    import "typeface-roboto-mono"; // nếu nhập được hỗ trợ
    require('typeface-roboto-mono') // nếu nhập không được hỗ trợ

  3. Đối với phần tử bạn có thể sử dụng
    một trong các cách sau:

    fontFamily: "Roboto Mono, Menlo, Monaco, Courier, monospace", // material-ui
    font-family: Roboto Mono, Menlo, Monaco, Courier, monospace; /* css */
    style="font-family:Roboto Mono, Menlo, Monaco, Courier, monospace;font-weight:300;" /*inline css*/

Mong rằng sẽ giúp.

— Manohar Reddy Poreddy
nguồ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 cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.