Question

我正在使用GatsbyJS对着陆页进行编码。我想在我的网站上使用AvenirNext字体。因此，我遵循了有关使用印刷术的教程。

我的 typography.js 文件如下所示：

import Typography from 'typography';

const typography = new Typography({
    baseFontSize: '14px',
    headerFontFamily: [
        'AvenirNextCondensed-Medium',
        'AvenirNextCondensed-Bold',
        'AvenirNextCondensed-Heavy',
    ],
    bodyFontFamily: [
        'AvenirNextCondensed-Medium',
        'AvenirNextCondensed-Bold',
        'AvenirNextCondensed-Heavy',
    ],
});

export default typography;

我正在将其加载到 gatsby-config.js 文件中，例如：

module.exports = {
    siteMetadata: {
        title: 'New Landing Page',
    },
     plugins: [
        {
            resolve: `gatsby-plugin-typography`,
            options: {
                pathToConfigModule: `src/utils/typography`,
            },
        },
        `gatsby-plugin-sass`,
        `gatsby-plugin-react-helmet`,
    ],
};

我认为使字体对所有系统可用就足够了，但是它仅在mac上可用，因为它是系统的“本机”字体。我如何让所有人都能使用它们？

（对不起的问题，很抱歉，但是我在这里找不到任何帮助的答案）

Answer 1

Avenir是一种商业许可的字体。仅当Web用户在系统上安装了该字体，或者您通过为访问者提供Web字体来提供该字体时，该功能才可供Web用户使用。

例如，您可以通过注册Adobe Fonts服务（以前称为Typekit，是一项付费服务，如果已经拥有的话，则包含在Creative Cloud中）来为用户获取许可的Webfont。

然后，将他们的代码片段之一从其服务复制到React应用程序（或使用其@import选项的CSS文件）。请注意，您应注意在堆栈中尽可能高地包含字体加载代码，以确保快速加载字体。

GatbysJS字体-AvenirNext-在Windows / Linux上不起作用

1 个答案: