Cách bao gồm phông chữ Roboto trong xây dựng webpack cho giao diện người dùng Material?

Question

Đối với một tiến bộ ứng dụng web dựa trên Material UI (Phản ứng) và xây dựng với Webpack, làm thế nào để đúng cách bao gồm Roboto phông chữ (s) để các ứng dụng không phụ thuộc vào máy chủ và phông chữ Google cũng làm việc ẩn?

• Các installation page chỉ tham chiếu Google fonts page, nhưng đó rõ ràng buộc phông chữ để được tải về từ máy chủ của Google.

• Tương tự Material UI Issue tồn tại liên quan đến phông chữ Roboto, nhưng vẫn dựa vào Google cung cấp tệp phông chữ.

• Tôi đã tìm thấy NPM package providing the Roboto font files, nhưng tôi không chắc chắn cách đưa các tệp đó theo nhiều kiểu và định dạng phông chữ và Tôi không biết giao diện nào của Material UI thực sự cần. Ngoài ra, việc nhập các họ phông chữ đó đơn giản qua @import dường như có performance issues.

Vì vậy, một giải pháp tốt và đơn giản để bó đúng file Roboto với ứng dụng của tôi là gì?

Answer 1

Đây là cách đội của tôi đã đi về bao gồm các phông chữ Roboto trong dự án Webpack của chúng tôi:

Tải phông chữ Roboto và thực hiện một tập tin CSS trong một thư mục font-cụ thể

• Tạo một thư mục (/fonts).
• Tải xuống tất cả phông chữ Roboto từ Font Squirrel và di chuyển chúng vào /fonts.
• Tạo tệp CSS (/fonts/index.css). Chúng tôi có nội dung cho tệp này từ this tutorial.

index.css:

* { 
    font-family: Roboto, sans-serif; 
} 

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

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

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

@font-face { 
    font-family: 'Roboto'; 
    src: url('Roboto-BoldItalic-webfont.eot'); 
    src: url('Roboto-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'), 
     url('Roboto-BoldItalic-webfont.woff') format('woff'), 
     url('Roboto-BoldItalic-webfont.ttf') format('truetype'), 
     url('Roboto-BoldItalic-webfont.svg#RobotoBoldItalic') format('svg'); 
    font-weight: bold; 
    font-style: italic; 
} 

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

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

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

@font-face { 
    font-family: 'Roboto'; 
    src: url('Roboto-LightItalic-webfont.eot'); 
    src: url('Roboto-LightItalic-webfont.eot?#iefix') format('embedded-opentype'), 
     url('Roboto-LightItalic-webfont.woff') format('woff'), 
     url('Roboto-LightItalic-webfont.ttf') format('truetype'), 
     url('Roboto-LightItalic-webfont.svg#RobotoLightItalic') format('svg'); 
    font-weight: 100; 
    font-style: italic; 
} 

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

@font-face { 
    font-family: 'Roboto'; 
    src: url('Roboto-MediumItalic-webfont.eot'); 
    src: url('Roboto-MediumItalic-webfont.eot?#iefix') format('embedded-opentype'), 
     url('Roboto-MediumItalic-webfont.woff') format('woff'), 
     url('Roboto-MediumItalic-webfont.ttf') format('truetype'), 
     url('Roboto-MediumItalic-webfont.svg#RobotoMediumItalic') format('svg'); 
    font-weight: 300; 
    font-style: italic; 
} 

Sử dụng các module file-loader webpack tải trong các tập tin phông chữ để webpack có thể nhận ra chúng

• npm install --save file-loader (https://www.npmjs.com/package/file-loader)
• Trong cấu hình webpack của bạn, hãy sử dụng trình tải như sau:

webpack.conf.js:

loaders: [ 
    ..., { 
    test: /\.(woff|woff2|eot|ttf|svg)$/, 
    loader: 'file?name=fonts/[name].[ext]' 
    } 
] 

Import các file font css trong mục nhập chính của ứng dụng

App.js:

import './fonts/index.css'; 

Và đó là nó. Phông chữ mặc định của ứng dụng của bạn giờ đây sẽ là Roboto.

CHỈNH SỬA: Phông chữ Roboto nào thực sự sử dụng Material-UI?

Một phần của câu hỏi này đang xác định ngay Phông chữ Roboto để đưa vào dự án vì toàn bộ phông chữ Roboto gần như là 5MB.

Trong README, hướng dẫn bao gồm điểm Roboto tới: fonts.google.com/?selection.family=Roboto:300,400,500. Ở đây, 300 = Roboto-Light, 400 = Roboto-Regular và 500 = Roboto-Medium. Các giá trị này tương ứng với trọng số phông chữ được xác định trong typography.js file. Trong khi ba trọng số phông chữ này tính đến mức sử dụng gần như toàn bộ thư viện, thì có một tham chiếu đến Regular-Bold trong DateDisplay.js. Nếu bạn không sử dụng DatePicker, có lẽ bạn nên an toàn để bỏ qua điều đó. In nghiêng kiểu chữ không được sử dụng ở bất kỳ đâu trong dự án ngoài kiểu dáng GitHub markdown.

Thông tin này là chính xác tại thời điểm viết bài này, nhưng nó có thể thay đổi trong tương lai.

Answer 2

Trong trường hợp ứng dụng được bắt đầu bằng create-react-app, nó không có tệp cấu hình webpack [hiển thị]. Trong trường hợp này bạn có thể làm như sau:

1. tạo/fonts trong thư mục/công

2. tạo /public/fonts/fonts.css, định nghĩa @font-faces

   @font-face { font-family: 'inglobal'; font-weight: normal; font-style: normal; src: url('./OperatorMono.ttf'); }

3. Sao chép các tệp phông chữ

4. thêm <link rel="stylesheet" href="%PUBLIC_URL%/fonts/fonts.css"> vào/p ublic/index.html's

5. Hoan hô!

5/b. Nếu vì lý do nào đó, nó vẫn không hoạt động, thay đổi phần mở rộng của phông chữ thành .css (cũng tại src: url ('./ OperatorMono.css'))

Answer 3

Bạn cũng có thể làm như nó được ghi lại trong vấn đề này: https://github.com/callemall/material-ui/issues/6256

npm install typeface-roboto --save 

Sau đó, trong index.js của bạn:

import 'typeface-roboto' 

trình với webpack/tạo-phản ứng ứng dụng.