react大屏引入其他字体

编程基础 • 2025-01-09 10:30 • 阅读 3

react大屏引入其他字体

1.assets/font/font.js 引用woff2的转码url

import {
    createGlobalStyle } from "styled-components";
export const TextFamily = createGlobalStyle` @font-face {font-family: "Grace"; src: // url('Grace-of-Etro.ttf') format('truetype'), url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAACHEABAAAAAAdTg...') format('woff2'), } .textFamily { font-family: "Grace" !important; font-style: normal; } `;

2.src/router.jsx

import React, { Fragment } from "react";
import { Router, Route, Switch } from "dva/router";
import IndexPage from "./routes/IndexPage";
import { Iconstyle } from "./assets/icon/iconfont";
import { Globalstyle } from "./style/global.js";
import { TextFamily } from "./assets/font/font.js";        //引入
// import "./assets/font/font.css";

function RouterConfig({ history }) {
  const route = () => {
    return (
      <Fragment>
        {/* 全局样式注册到界面中 */}
        <TextFamily></TextFamily>					      //引入
        <Iconstyle></Iconstyle>
        <Globalstyle></Globalstyle>
        {/* 路由管理 */}
        <Switch>
          <Route path="/" exact component={IndexPage} />
        </Switch>
      </Fragment>
    );
  };
  return <Router history={history}>{route()}</Router>;
}

export default RouterConfig;

react大屏引入其他字体

react大屏引入其他字体

相关推荐