reactjs 自定义@font-face顺风-字体未显示

ajsxfq5m 于 2023-01-02 发布在 React

关注(0)|答案(2)|浏览(162)

我正在尝试添加一个自定义字体到一个使用Tailwind的React项目。
我已经将font - tiempos-headline-medium.woff2添加到/public并更改了以下内容：
节点模块〉尾风css〉尾风. css

@tailwind base;

@tailwind components;

@tailwind utilities;

@font-face {
    font-family: "tiempos-headline";
    src: local('tiempos-headline'), url("tiempos-headline-medium.woff2") format("woff2");
    font-weight: 600;
  }

tailwind.config.js

module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}'
  ],
  theme: {
    extend: {
      colors: {
        brand: {
          'pink-link': '#FB335A',
          'pink': '#FB335A',
          300: '#000000',
          400: '#f8f8f8',
          500: '#000000',
          600: '#000000',
          700: '#000000',
        }
      },
      animation: {
        loading: 'rotate 1s linear infinite',
      }
    },
    fontFamily: {
      sans: ['aktiv-grotesk', 'sans-serif'],
      serif: ['tiempos-headline', 'serif'],
    },
  },
  plugins: [],
}

但是字体没有显示出来--它只显示了一个衬线体--你知道我哪里出错了吗？

reactjs

来源：https://stackoverflow.com/questions/74973847/custom-font-face-tailwind-font-isnt-displaying

2条答案

按热度按时间

de90aj5v1#

首先包括它我的index.html文件作为一个链接，你可以看到弹出

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
        <link
            href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
            rel="stylesheet"
        />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Bhrugu Tundeliya</title>
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="/src/main.tsx"></script>
    </body>
</html>

这就是我在顺风时的做法

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        './index.html',
        './src/**/*.{js,ts,jsx,tsx}',
        './src/**.{js,ts,jsx,tsx}',
    ],
    darkMode: 'class',
    theme: {
        extend: {
            colors: {
                'react-color': '#61DBFB',
            },
            backgroundImage: {
                Icsun: "url('./src/asset/sunny.png')",
                Icmoon: "url('./src/asset/half-moon.png')",
            },
            fontFamily: {
                poppins: ['poppins', 'sans-serif'],
            },
            animation: {
                '0%, 100%': { transform: 'rotate(-3deg)' },
                '50%': { transform: 'rotate(3deg)' },
            },
        },
    },
    plugins: [],
}

以及我在任何地方使用的通用文本组件中

export const Text = ({
    children,
    className,
    onMouseLeave,
    onMouseDown,
    onMouseEnter,
    onMouseUp,
}: TextProps) => {
    return (
        <label
            onMouseLeave={onMouseLeave}
            onMouseDown={onMouseDown}
            onMouseEnter={onMouseEnter}
            onMouseUp={onMouseUp}
            className={`font-poppins ${className}`}
        >
            {children}
        </label>
    )
}

而且它工作得很好。。你也可以在CSS的正文中加入辣。我喜欢控制所有的文本，所以我总是做一个组件。

赞(0）回复(0）举报 2023-01-02

7qhs6swi2#

1.首先确保css文件中font-face指令中的字体路径正确。
文件结构如下所示：

root_project
  | tailwind.config.js
  | node_modules
  | src
  | public
  | __ images
  | __ tiempos-headline-medium.woff2
  ...

使用绝对路径编写css路径：url("/fonts/tiempos-headline-medium.woff2")
1.在tailwind.config.js文件中，将指令fontFamily: {}移动到extend: {}对象中以添加字体并扩展字体配置。
💡 如果您想完全覆盖默认字体，请将指令fontFamily: {}移动到theme: {}对象中。
基于您的设置的配置示例：

style.css

/* as the .woff2 file is in the public dir, we use absolute path "/" */
@font-face {
  font-family: 'tiemposHeadline';
  src: url('/tiempos-headline-medium.woff2') format('woff2');
  font-weight: 600;
}

tailwind.config.js

module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}'
  ],
  theme: {
    extend: {
      fontFamily: { // we name our custom font "tiempos"
        tiempos: ['tiemposHeadline', 'serif'],
      },
    },
  },
  plugins: [],
}

在组件中：

export default function Home() {
  return (
    <h1 className="font-tiempos">Custom Font</h1>
  );

赞(0）回复(0）举报 2023-01-02

我来回答

reactjs 自定义@font-face顺风-字体未显示

2条答案

相关问题

热门标签

最新问答