前端之家

  1. 首页
  2. 问答

如何在带有样式化组件的Reactjs中导入本地字体？

• 问答 
import { createGlobalStyle } from "styled-components";

createGlobalStyle`
  @font-face {
    font-family: 'Segoe Pro Regular';
    font-style: normal;
    font-weight: normal;
    src: url('SegoePro-Regular.woff') format('woff');
}`

然后，我将import "./components/GlobalStyles";添加到index.js

我尝试在font-family: Segoe Pro Regular;的某些组件中使用它，但是它不起作用

我也尝试过导入

import Font from "./SegoePro-Regular.woff"
import { createGlobalStyle } from "styled-components";

    createGlobalStyle`
      @font-face {
        font-family: 'Segoe Pro Regular';
        font-style: normal;
        font-weight: normal;
        src: url(${Font}) format('woff');
    }`
htkb07 回答：如何在带有样式化组件的Reactjs中导入本地字体？

font-family: Segoe Pro Regular;不是有效的代码，您应该尝试：

font-family: 'Segoe Pro Regular';

这是一个可供参考的工作示例：

import React from 'react';
import ReactDOM from 'react-dom';
import { createGlobalStyle } from 'styled-components';
import MajorMonoTTF from './MajorMonoDisplay-Regular.ttf';

const GlobalStyle = createGlobalStyle`
  @font-face {
    font-family: 'Major Mono Display';
    src: url(${MajorMonoTTF}) format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: auto;
  }
  h1 {
    font-family: 'Major Mono Display';
  }
`;

const App = () => (
  <>
    <GlobalStyle />
    <h1>Cool Title</h1>
  </>
);

ReactDOM.render(<App />,document.getElementById('root'));

Edit Q-58787035-FontFamily

javascriptreactjsstyled-components
本文链接：https://www.f2er.com/3129929.html

大家都在问