如何在我的项目中插入本地字体？

Question

我使用 IconMoon 创建自定义图标字体。

在它生成的.html中，完美运行。但是当我尝试在带有 React 和 Styled-Components 的项目中使用它时，图标没有显示，而是在 HTML.

中显示其内容

我的字体在路径中：src/assets/fonts/icons

浏览器正在下载字体，没有显示错误：

很快我尝试为我的字体创建一个组件，类似于 FontAwesome 并且发生了这种情况：

我的组件：

import React from "react";

import styled from "styled-components";

const Tst = styled.i`
  font-family: "spotify" !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  ::before {
    content: "\e900";
    color: red;
  }
`;

const SaveFavorite = () => {
  return <Tst />;
};

export default SaveFavorite;

我的全局样式：

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
    @font-face {
        font-family: "spotify";
        font-weight: normal;
        font-style: normal;
        src: url("../assets/fonts/spotify.eot?") format("embedded-opentype"),
            url("../assets/fonts/spotify.ttf?") format("truetype"),
            url("../assets/fonts/spotify.woff?") format("woff"),
            url("../assets/fonts/spotify.svg?") format("svg");
    }

    * {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
        outline: 0;
    }

    body {
        font-family: 'CircularSpUIv3T', sans-serif;
        color: white;
        text-rendering: optimizeLegibility !important;
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
        user-select: none;
    }

    img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
`;

export default GlobalStyle;

Answer 1

如果您查看由 Styled Components 生成的 css，您会发现字体路径根本没有解析，它们正是您键入它们的方式。如果没有 Babel 的帮助，浏览器将无法在 src 目录中找到相对路径，而您现在拥有的方式就是按原样传递这些路径。

你有两个选择，虽然我不确定两者是否都有效。

选项 1：将字体移动到 public 目录

public 目录中的文件可以通过浏览器找到，就像任何旧的 HTML 页面一样。在您的全局样式中，您将不得不使用相对于 public/index.html.

的路径

您的文件结构类似于：

project
|-- public
  |-- index.html
  |-- fonts
    |-- spotify.eot
    |-- spotify.ttf
    |-- spotify.woff
    |-- spotify.svg
|-- src
  |-- global.style.js
  |-- (...)

还有你的global.style.js：

const GlobalStyle = createGlobalStyle`
    @font-face {
        font-family: "spotify";
        src: url("fonts/spotify.eot?") format("embedded-opentype"),
            url("fonts/spotify.ttf?") format("truetype"),
            url("fonts/spotify.woff?") format("woff"),
            url("fonts/spotify.svg?") format("svg");
    }

选项 2：将字体保留在 src 中，但让 Babel 为您解析路径

为了让 Babel 解析路径，我们需要在我们的 global.style.js 中导入文件，然后使用解析路径而不是静态路径：

import SpotifyEOT from '../assets/fonts/spotify.eot';
// etc

const GlobalStyle = createGlobalStyle`
    @font-face {
        font-family: "spotify";
        src: url(${SpotifyEOT}?) format("embedded-opentype"),
            // [etc]
    }

我不知道问号的实际用途，但我想您可以像我一样将它放在解析路径之后。