Hướng dẫn font-family: roboto css

answer

295

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

Truy cập 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 phần tử để đưa vào các trang của bạn và danh sách các font-familyquy tắc mẫu để 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.

295 hữu ích 5 bình luận chia sẻ

answer

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:

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 cung cấp phông chữ. Google thậm chí còn cung cấp dịch vụ này miễn phí [ đây là 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 các phông chữ chiếm cùng pixel trên các trình duyệt.

Các trình tải phông chữ JS như trình đượ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à lệnh 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ữ.

    
      
      

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

Phương pháp DIY bao gồm việc nhận được một phông chữ được cấp phép để sử dụng trên web và [tùy chọn] sử dụng một công cụ như trình tạo 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 đó, triển khai trên nhiều trình duyệt của thuộc tính @font-faceCSS 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 cho kết quả tốt nhất về hiệu suất tổng thể, khả năng tương thích và tính khả dụng.

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

CẬP NHẬT

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

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

78 hữu ích 0 bình luận chia sẻ

answer

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

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

@import url[//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;
}

23 hữu ích 3 bình luận chia sẻ

answer

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 main.css của bạn như sau: 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à đảm bảo rằng các tệp nằm trong thư mục này chứ không phải trong 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 giải nén tất cả eot, svg, v.v. từ tất cả thư mục con và đặt trong thư mục phông chữ không

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

Tôi có cần tạo tệp css fonts.css và đưa vào tệp mẫu cơ sở của mình không

Không nhất thiết, bạn chỉ có thể đưa mã đó vào main.css của mình. Nhưng bạn nên tách phông chữ khỏi CSS tùy chỉnh của mình.

Đây là một ví dụ về phông chữ LESS / tệp 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ộ tiền xử lý CSS, nó làm cho những thứ như thế này dễ dàng hơn một chút ]

7 hữu ích 0 bình luận chia sẻ

answer

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

Nếu bạn đã tạo tệp css riêng biệt, hãy đặt dòng dưới đây ở đầu tệp css như:

@import url['//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, hãy thêm dòng trên vào giữa ...:


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

sau đó:

html, body {
    font-family: 'Roboto', sans-serif;
}

4 hữu ích 0 bình luận chia sẻ

answer

Đâ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 cần phải sử dụng CDN

TEMPORARILY thêm cdn cho css để tải các phông chữ roboto vào index.html và để trang tải. từ các công cụ dành cho nhà phát triển của Google, hãy xem các nguồn và mở rộng nút fonts.googleapis.com và xem nội dung của tệp css? family = Roboto: 300,400,500 & display = swap và sao chép nội dung. Đặt nội dung này vào tệp css trong thư mục nội dung của bạn.

Trong tệp css, hãy xóa tất cả những thứ tiếng 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[//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 nội dung 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 duy nhất.

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

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 đó, hãy sử dụng tệp css mới mà bạn đã tạo.

3 hữu ích 0 bình luận chia sẻ

answer

Với css:

@font-face {
  font-family: 'Roboto';
  src: url['../font/Roboto-Regular.ttf'] format['truetype'];
  font-weight: normal;
  font-style: normal;
}

/* etc, etc. */

Với sass:

  @font-face
    font-family: 'Roboto'
    src: local['Roboto'], local['Roboto-Regular'], url['../fonts/Roboto-Regular.ttf'] format['truetype']
    font-weight: normal
    font-style: normal

  @font-face
    font-family: 'Roboto'
    src: local['Roboto Bold'], local['Roboto-Bold'], url['../fonts/Roboto-Bold.ttf'] format['truetype']
    font-weight: bold
    font-style: normal

  @font-face
    font-family: 'Roboto'
    src: local['Roboto Italic'], local['Roboto-Italic'], url['../fonts/Roboto-Italic.ttf'] format['truetype']
    font-weight: normal
    font-style: italic

  @font-face
    font-family: 'Roboto'
    src: local['Roboto BoldItalic'], local['Roboto-BoldItalic'], url['../fonts/Roboto-BoldItalic.ttf'] format['truetype']
    font-weight: bold
    font-style: italic

  @font-face
    font-family: 'Roboto'
    src: local['Roboto Light'], local['Roboto-Light'], url['../fonts/Roboto-Light.ttf'] format['truetype']
    font-weight: 300
    font-style: normal

  @font-face
    font-family: 'Roboto'
    src: local['Roboto LightItalic'], local['Roboto-LightItalic'], url['../fonts/Roboto-LightItalic.ttf'] format['truetype']
    font-weight: 300
    font-style: italic

  @font-face
    font-family: 'Roboto'
    src: local['Roboto Medium'], local['Roboto-Medium'], url['../fonts/Roboto-Medium.ttf'] format['truetype']
    font-weight: 500
    font-style: normal

  @font-face
    font-family: 'Roboto'
    src: local['Roboto MediumItalic'], local['Roboto-MediumItalic'], url['../fonts/Roboto-MediumItalic.ttf'] format['truetype']
    font-weight: 500
    font-style: italic

/* Roboto-Regular.ttf       400 */
/* Roboto-Bold.ttf          700 */
/* Roboto-Italic.ttf        400 */
/* Roboto-BoldItalic.ttf    700 */
/* Roboto-Medium.ttf        500 */
/* Roboto-MediumItalic.ttf  500 */
/* Roboto-Light.ttf         300 */
/* Roboto-LightItalic.ttf   300 */

/* //fonts.google.com/specimen/Roboto#standard-styles */

3 hữu ích 0 bình luận chia sẻ

answer

Thử cái này


@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;
}

This is Sample text
This is Sample text

2 hữu ích 0 bình luận chia sẻ

answer

Sử dụng / font / hoặc / font / 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;

}

2 hữu ích 0 bình luận chia sẻ

answer

dễ thôi

mỗi thư mục trong số những thư mục 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_regular_macroman"

để sử dụng bất kỳ trong số chúng:

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 css

3- bây giờ đưa nó vào tệp css

ví dụ để bao gồm phông chữ có tên "roboto_regular_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;
}

xem đường dẫn của các tệp, ở đây tôi đã tải lên thư mục có tên "roboto_regular_macroman" trong cùng một thư mục chứa css

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

1 hữu ích 0 bình luận chia sẻ

answer

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

1 hữu ích 0 bình luận chia sẻ

answer

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

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

0 hữu ích 0 bình luận chia sẻ

answer

Đã dành một giờ để khắc phục sự cố phông chữ.

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

Cài đặt mô-đun npm:
npm install --save typeface-roboto-mono
nhập vào tệp .js mà bạn muốn sử dụng
một trong các tệp dưới đây :
import "typeface-roboto-mono"; // nếu nhập được hỗ trợ
require['typeface-roboto-mono'] // nếu nhập không được hỗ trợ
Đối với phần tử, bạn có thể sử dụng
một trong các cách dưới đây:
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*/

Hy vọng rằng sẽ giúp.

0 hữu ích 0 bình luận chia sẻ

Mẩu chuyện dài:

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

Với css:

Với sass:

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề