时间戳

首页 > 解决方案 > 反应组件库，字体不起作用

reactjs - 反应组件库，字体不起作用

问题描述

我使用样式化组件创建了一个组件库。该库包含一些自定义字体，格式不同，woff、woff、eot、tff、otf 等。当我使用组件库中的字体时，字体可以正常工作。

当我将库导入另一个反应项目时，问题就出现了。当我查看节点模块时，我可以确定包含字体。该项目使用 React 和 Next.js 编写。我错过了使用这些字体的一些重要步骤吗？我没有收到任何错误。应用程序，只需使用指定的后备字体。我对更改整个应用程序的字体不感兴趣。我希望能够访问使用我的组件库导出的字体，并在我的应用程序的某些地方使用它们。

一个例子：我的组件库包含组件“标题”，它使用自定义字体。

export const h1CSS = cssStyled`
margin-top: ...;
  margin-bottom: ...;

  line-height: ...;
  font-weight: ...;
  color: ...;
  font-family: "Some_custom_Font";
  font-style: normal;
  margin-top: 0;
  text-rendering: optimizeLegibility;
`;

在导入组件库的应用程序中，我可以使用 Headline 组件。唯一的问题是标题组件在我的应用程序中使用时没有自定义字体。

标签： reactjsnext.jsstyled-components

解决方案

在不知道错误消息或所有其他方面很难说出您需要做什么的情况下。

但是您可以根据需要自定义文档_document.js。哪个解决起来效率更高。

要覆盖默认 Document，请创建文件./pages/_document.js并扩展 Document 类，如下所示：

import Document, { Html, Head, Main, NextScript } from 'next/document';
class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
           //You can add custom Favicon from here also              
           <link rel="icon" href={Favicon_URL} type="image/png" />
          <meta
            httpEquiv="cache-control"
            content="no-cache, nostore, must-revalidate"
          />
          <meta httpEquiv="pragma" content="no-cache" />
          <meta httpEquiv="expires" content="0" />
          //Please add your woff, woff,eot, tff, otf files here. 
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}
export default MyDocument;

官方文档页面

推荐阅读