将自定义字体添加到Material UI项目的3种方法

2020年12月30日11:08:20 发表评论 36 次浏览

本文概述

什么是Material UI?

材质用户界面是一个React组件库, 用于更快, 更轻松地构建Web界面。它具有大量常用的UI组件, 因此开发人员可以专注于向应用程序添加功能, 而不必在UI实现上花费大量时间。它利用了Google制作的材料设计指南, 并拥有超过59k星和1800个贡献者的GitHub, 它是React开发人员最喜欢的UI库之一。

如何开始使用Material UI

本文假设你将使用创建反应应用或任何其他React工具链。如果你要设置自己的工具链并构建管道, 请确保包括一个用于加载字体的插件或加载器.

首先, 请安装create-react-app:

/ with npm
npx create-react-app font-app
//with yarn
yarn create-react-app font-app

要在你的应用程序中使用材质UI, 请通过npm或yarn安装它:

// with npm
npm install @material-ui/core

// with yarn
yarn add @material-ui/core

然后, 添加一些UI组件以在App.js中工作:

import React from 'react';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import './App.css';


function App() {
  return (
    <div className="App">
      <div>
      <Typography variant="h2" gutterBottom>
          Welcome to React
      </Typography>
        <Button variant="contained" color="secondary">Ready To Go</Button>
      </div>
    </div>
  );
}

export default App;

使用浏览器的检查器检查按钮和标题, 你会看到它们是使用默认字体Roboto呈现的。那么, 我们该如何改变呢?

roboto字体

如何将自定义字体添加到你的Material UI项目

下面, 我们将通过三种不同的方法将你选择的任何字体添加到Material UI项目中。

方法1:使用Google字体CDN

前往Google字体并选择一个字体家族。我将使用奇兰卡草书字体。复制CDN链接并将其添加到<头>的public / index.html文件:

<link href="https://fonts.googleapis.com/css2?family=Chilanka&display=swap" rel="stylesheet">

为了能够使用字体, 你必须使用CreateMuiTheme这是Material UI提供的API, 可根据收到的选项生成自定义主题, 主题提供者这是用于将自定义主题注入应用程序的组件。

将此添加到你的App.js文件:

我们为制作了一个自定义演示.
不完全是。点击这里查看.

将自定义字体添加到Material UI项目的3种方法1
import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
  typography: {
    fontFamily: [
      'Chilanka', 'cursive', ].join(', '), }, });

然后使用默认的Material UI包装你的组件主题提供者组件, 将主题道具传递给它。主题道具的值应该是你定义的主题的名称:

<ThemeProvider theme={theme}>
 <div className="App">
   <div>
     <Typography variant="h2" gutterBottom>
       Welcome to React
     </Typography>
     <Button variant="contained" color="secondary">Ready To Go</Button>
   </div>
 </div>
</ThemeProvider>

现在使用浏览器检查器工具检查组件, 你会发现字体系列已更改为Chilanka。

欢迎以chilanka字体回应

方法2:使用google-webfonts-helper自托管字体

自托管字体有一些好处。它的速度明显更快, 并且字体可以离线加载。

Google-webfonts-helper是一个了不起的工具, 可以使自托管字体轻松自如。它根据你选择的字体, 字符集, 样式和浏览器支持提供字体文件和字体说明。

只需在其上搜索任何Google字体, 然后选择所需的字体粗细即可。我将使用Josefin-sans。

谷歌字体列表

将生成的字体声明复制到src / index.css文件。你可以自定义字体文件的位置-默认假定../fonts/。我们将使用./字体因为我们将下载的字体放在src /字体目录。

字体来源

最后, 下载文件。解压缩它们, 并将其放置在项目中的适当位置src /字体

和以前一样, 你必须使用CreateMuiTheme并用主题提供者零件:

const theme = createMuiTheme({
 typography: {
   fontFamily: [
     'Josefin Sans', 'sans-serif', ].join(', '), }, });

现在检查, 你应该看到字体家族已更改为Josefin Sans。

将自定义字体添加到Material UI项目的3种方法2

方法3:使用Typefaces NPM软件包的自宿主字体

字样是由Kyle Matthews创建的NPM软件包集合, 用于Google字体和其他一些开源字体。通过与NPM一起安装, 可以将字体与其他依赖项一样添加到项目中。

这是我最喜欢的方法, 因为所有Web(site | app)依赖项都应尽可能通过NPM进行管理。

只需在存储库中搜索你选择的字体, 然后单击字体文件夹以找到必要的npm安装命令。我将和Cor一起去:

npm install typeface-cormorant

然后, 将包导入到项目的入口文件中–src / index.js在我们的情况下:

import "typeface-cormorant";

另外, 像以前一样, 你必须使用CreateMuiTheme定义字体系列, 并用Themeprovider组件包装组件:

const theme = createMuiTheme({
  typography: {
    fontFamily: [
      'Cormorant', 'serif', ].join(', '), }, });

现在检查, 你会发现字体系列已更改为Cormorant。

鸬鹚

奖金

如果要为标题和按钮定义不同的字体怎么办。说主要字体和次要字体?

你所需要做的就是定义两个主题常量, 并用Themeprovider组件包装所需的组件, 每个组件都具有相应字体的主题属性。

例如, 如果你想在标题中使用Cormorant字体, 在按钮上使用Josefin-sans, 则首先分别为Cormorant和Josefin-sans字体定义两个主题:

const headingFont = createMuiTheme({
  typography: {
    fontFamily: [
      'Cormorant', 'serif', ].join(', '), }, });

const buttonFont = createMuiTheme({
  typography: {
    fontFamily: [
      'Josefin Sans', 'sans-serif', ].join(', '), }, });

然后, 用主题提供者所需字体的组成部分, 如下所示:

function App() {
  return (

    <div className="App">
      <div>
        <ThemeProvider theme={headingFont}>
          <Typography variant="h2" gutterBottom>
            Welcome to React
          </Typography>
        </ThemeProvider>
        <ThemeProvider theme={buttonFont}>
          <Button variant="contained" color="secondary">
                         Ready To Go
          </Button>
        </ThemeProvider>

      </div>
    </div>
  );
}

还有中提琴!现在你将看到标题是用Cormorant字体渲染的, 按钮是用Josefin Sans字体渲染的。

鸬鹚
武术josefin字体,欢迎作出反应。指向控制台中字体的绿色箭头

总结

在本文中, 我们介绍了三种轻松地将自定义字体添加到Material UI项目的方法。我们还研究了如何为不同的组件定义单独的字体。我希望阅读本文有助于回答你对该主题的任何疑问。

现在, 继续构建伟大的东西!

你是否要添加新的JS库以提高性能或构建新功能?如果他们做相反的事情怎么办?

毫无疑问, 前端变得越来越复杂。在向应用程序添加新的JavaScript库和其他依赖项时, 你将需要更多可见性, 以确保用户不会遇到未知问题。

日志火箭是一个前端应用程序监视解决方案, 可让你重播JavaScript错误, 就好像它们发生在你自己的浏览器中一样, 以便你可以更有效地对错误做出反应。

LogRocket仪表板免费试用横幅

https://notlogy.com/signup/

日志火箭无论使用哪种框架, 它都能与任何应用完美配合, 并具有用于记录来自Redux, Vuex和@ ngrx / store的其他上下文的插件。你可以汇总并报告问题发生时应用程序所处的状态, 而不用猜测为什么会发生问题。 notlogy还监视你的应用程序的性能, 报告诸如客户端CPU负载, 客户端内存使用情况等指标。

自信地建立-免费开始监控.

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: