正确的方式来包含新的字体并引用它？

在ReactQL文件结构中，是否有推荐的地方来存储自定义字体，以及如何引用该字体？正确的方式来包含新的字体并引用它？

例如，我尝试将字体添加到./static，并在styles.global.css中引用它，但没有这样的运气。

有什么建议吗？

2017-07-07 Clay Mitchell

您可以通过三种方式引用字体（或图片）：

1.从你的JS代码内

您可以导入字体/ IMG就像任何其他代码，使用ES6模块语法：

// imports will start looking in your project root 
image someFont from 'src/fonts/whatever.ttf'; // someFont = public path to font

在这种情况下，将等于由真实的WebPack处理，并且在所得到的dist夹倾倒字体文件路径的字符串。这是自动完成的;您不需要将字体或图像放在任何特殊位置。

然后，您可以在您通常需要完整文件路径的任何地方将其引用到您的React组件中;该字符串将从ReactQL Web服务器公开访问：

// The regular, pre-processed PNG image 
import logoImage from 'src/images/logo.png'; 

// A component that uses the image 
const ShowLogo =() => (
    <img src={logoImage} /> 
);

在这种情况下，logoImage可能拉闸为/assets/img/logo.d41d8cd98f00b204e980.png的WebPack已经处理，并在产生的Javascript包甩不变后。

按照惯例，我建议您将静态资产保留在与调用React组件相同的文件夹中。如果您有多个组件指向相同的资产，只需选择一个合理的名称 - 如或src/images，或者甚至只是/images。

2.从你的CSS中

内的任何.css|sass|scss|less|或*.global.版本相同的，你可以导入使用常规@import语法：

styles.global.css

@font-face { 
    font-family: 'Starjout'; 
    src: url('./Starjout.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: normal; 
} 

html { 
    padding: 0; 
    border: 0; 
    font-family: 'Starjout'; 
    font-size: 16px; 
}

为确保正确解析字体，请相对于CSS文件导入。在这种情况下，Starjout.ttf与styles.global.css位于同一文件夹中。

3内部/static

您放在/static将被放置在所产生的dist/public文件夹原样。它不会被Webpack处理 - 这意味着，图像不会在生产中压缩，并且不会创建.gz或.br版本。他们只会被复制过来。

要引用该文件，您可以在CSS中使用完整的URL。如果您使用相对路径，Webpack将希望找到相对于源CSS的文件，并且它不起作用。同样，把事情/static意味着文件将在其原始形式被复制，所以通过JS进口也不会正常工作。

的基本规则是：你要考虑“源”的任何静态文件，放在src/或其他地方在您的项目路线。任何你想不处理复制或能够动态导入，放在/static

来源

2017-07-07 20:30:13

正确的方式来包含新的字体并引用它？

回答

相关问题