如何在Vue或React项目中使用自定义字体,以及字体打包

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在Vue或React项目中使用自定义字体,以及字体打包相关的知识，希望对你有一定的参考价值。

参考技术A

总结一下就是：用户借助该规则，可以为引入的字体包命一个名字，并指定在哪里可以找到它（指定字体包的存储路径）后，就可以像使用通用字体那样去使用它了。

例如现在的需求是：需要在项目中使用 KlavikaMedium-Italic 字体。

则只需以下三个步骤即可。

这里放到根目录下的 tool/fonts 文件夹里。

新建一个index.vue文件，引入样式：

效果如下：

既然在本地开发环境实现了效果，于是就使用 webpack 打包准备上线，却发现 webpack 在打包过程中报错：

我们在定义自定义字体时使用URL指定了字体包的路径，由于 webpack 默认是无法处理 css 中的 url 地址的，因此这里会报错。

这时就需要借助 loader 来大显身手了，解决这个问题需要使用 file-loader ，它主要干了两件事儿：

在 webpack.config.js 中，配置file-loader：

再次执行打包命令，不再报错。

于是将打包出来的 dist 目录重新部署到服务器上后访问页面，却发现由于找不到字体导致没有生效：

从图中可以看出，http请求字体包的路径为： 根目录下(打包出来的静态文件index.html所在目录)的 css/620db1b997cd78cd373003282ee4453f.otf 。

看了一下打包命令生成的 dist 目录结构：

却发现，字体包和 index.html 是在同一级。因此字体无法生效的原因就很明朗了：

可以通过修改字体包打包后的实际存储路径去解决这个问题，在 webpack.config.js 中，借助 options 参数可以继续给 file-loader 设置更多的配置项：

再次打包，生成的 dist 目录结构如下：

可以看到字体包正如配置时预期的那样存储在 **css/fonts **目录下面。

重新部署项目，再次查看：

这一次 http 请求的字体包路径与实际的存放路径一致，因此自定义字体生效。

可以通过下面这个梳理流程图看的更清楚一些：

为什么本地开发的时候可以看到字体，部署到服务器后却看不到了呢？

在 React-Native 中使用自定义字体

【中文标题】在 React-Native 中使用自定义字体【英文标题】：Use custom-font in React-Native 【发布时间】：2015-06-01 09:07:11 【问题描述】：

我想在我的应用程序中使用自定义字体，但一直出错

[RCTLog][tid:0x78f70450][RCTConvert.m:581]>Unrecognized font family 'Roboto'

这是否意味着我必须弄乱iOS直接导入字体的方式？

【问题讨论】：

【参考方案1】：

这是因为 iOS 默认没有提供 Roboto 字体。

没错。要使其可用，您必须从 Xcode 将其包含在您的项目中。只需按照此答案提供的steps 进行操作，这非常简单。

一旦你这样做了，那么你在 JS 中使用它应该没有问题。

【讨论】：

只需在项目文件夹的控制台中运行react-native link。适用于 Android 和 iOS @aakash-sidgel 的回答要容易得多【参考方案2】：

    在您的 Xcode 项目中创建一个新的组字体

    将字体从 Finder 拖放到您刚刚创建的字体组中，并在添加到目标列表中检查您的项目名称

    在项目的主目录中展开项目名称文件夹并打开 Info.plist

    将Fonts provided by application 添加为新密钥

    在Fonts provided by application 下添加一个新项目，并将项目值设置为您添加到字体文件夹的每个字体的完整字体名称和扩展名

    即如果字体文件名是OpenSans-ExtraBold.ttf，那么这应该是项目的值。

    要在 React Native 中使用字体，只需为元素设置 fontFamily 样式属性（请参阅 this）。请注意，样式应使用字体的 name 而不是文件名。

    例如在上面的示例中，样式属性为fontFamily: 'Open Sans'

    运行 Shift + Command + K 以清理上次构建

    然后 Command + B 开始一个新的构建

    最后是 Command + R 来运行应用程序

如果你仍然看到错误 Unrecognized font family 重启你的 react 打包器。

https://github.com/alucic/react-native-cheat-sheet

希望对你有帮助！

【讨论】：

OH 第 10 步。重新启动反应打包程序完成了工作。谢谢:) 还需要将其添加到“复制捆绑资源”中。 我忘记附加'.ttf'后缀了... THX！ 这也可以：right click Fonts and select "Add files to <project name>" 然后在 finder 上选择字体文件 所有答案都与在项目中预打包字体有关，任何在运行时动态下载字体并保存然后使用它的人。通常中文字体很大，会大大增加应用程序的大小。【参考方案3】：

更新

您现在不需要手动安装 rnpm。在第一步之后，在第二步中，您只需使用命令react-native link 即可链接您的所有资产。 rnpm 现在正在与 react-naitve 合并。在 RN https://github.com/facebook/react-native/commit/e8b508144fdcdea436cf4d80d99daec757505c70 上签出此提交

通过 `rnpm.它将字体添加到 android 和 ios。将要添加的字体放置在项目目录中的合适位置。在您的 package.json 中添加以下内容：

步骤1

...
    "rnpm": 
          "assets": ["path/to/your/font/directory"]
    ,
...

步骤2

然后从命令行执行：rnpm link

您现在可以愉快地在您的应用中使用您的字体了。

注意：您必须安装 rnpm 才能工作。 就做npm install -g rnpm

这里是文档：https://github.com/rnpm/rnpm#advanced-usage

【讨论】：

既然 rnpm 被合并到 react-native 中，我应该直接从 react-native 做，对吗？ 我没有测试过，但应该可以。测试后我会更新答案。 @AndréJunges IOS 对我不起作用 - 我必须按照 @alucic 的回答中的步骤操作 我刚试了一下，它对我有用。你在运行 react-native 链接后重建了项目吗？您仍然需要通过将 rnpm 条目添加到 package.json 中。 @AndréJunges 这里缺少一个细节，react native 中的“fontFamily”应该是字体的名称，而不是字体文件的名称（在 Mac 上你可以在 Font Book 中打开字体查看字体名称，显示在标题栏中）【参考方案4】：

Aakash 的回答是正确的。

方法：

    将字体添加到 react-native 项目的文件夹中 将以下内容添加到 package.json 中 
 "rnpm": 
    "assets": ["./your/fonts/folder"]
    在终端中运行react-native link

可选：

    使用npm install -g rnpm添加rnpm 运行rnpm link

使用示例

    我将 myFont.ttf 放在一个文件夹中，其路径（相对于 package.json）为 ./src/assets/fonts 我将以下代码放入 package.json 文件中 
  "rnpm": 
    "assets": ["./src/assets/fonts"]
    我在终端运行

反应原生链接

    我在 react-native 的 Text 元素中使用它，如下所示： （第一个 之前没有空格）

你好我的字体！ 文>

图片： package.json link

感谢 Aakash 的精彩回答，希望您不介意像我这样的菜鸟再次崩溃！

【讨论】：

当我运行 react-native link 时，我在资产/字体中添加的字体会被自动删除，如何解决这个问题，因为字体仍然无法正常工作 嗨，我不确定发生了什么..您将字体准确放置在哪里？ （即我使用原子编辑器并将文件夹放在那里）。问题的快照可能有用吗？ 它现在可以工作了，我只是在 /android/app/src/main/assets/fonts/ 下添加了它，然后避免在样式上使用fontWeight: 'bold'，因为它打破自定义字体使其无法正常工作。重新构建应用程序并完成。 :) 我应该导入字体吗？ 我应该导入字体吗？【参考方案5】：

如果你使用 Create React Native App，在运行 react-native link 时你会看到：

react-native link 不能在 Create React Native App 中使用 项目。如果您需要包含依赖于自定义的库 本机代码，您可能必须先弹出。看 https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md 了解更多信息。

如果您只想添加自定义字体，而不是弹出，您可以使用 Expo，它也默认包含在 CRNA 中。本质上，你这样做：

await Font.loadAsync(
  'open-sans-bold': require('./assets/fonts/OpenSans-Bold.ttf'),
);

另外，您只能使用ttf 或otf 格式化字体，不能使用ttc 字体：https://developer.apple.com/documentation/uikit/text_display_and_fonts/adding_a_custom_font_to_your_app

这里是 Expo 的详细文档：https://docs.expo.io/versions/latest/guides/using-custom-fonts

【讨论】：

【参考方案6】：

react-native 版本

有很多答案

对于使用 react-native version > 0.60 的用户，'rnpm' is deprecated 和自定义字体将无法使用。

现在，为了在 react-native 版本 > 0.60 中添加自定义字体，您必须：

1- 在项目的根文件夹中创建一个名为 react-native.config.js 的文件。

2- 在新文件中添加这个

module.exports = 
  assets: ['./assets/fonts/']
;

3- 在根项目路径下运行react-native link 命令。

PS在运行react-native link命令之前确保你有正确的字体文件夹路径

【讨论】：

【参考方案7】：

    在项目的 root/assets/font 文件夹中添加字体文件（即 .otf 或 .ttf）。

    在 package.json 中： rnpm: "assets": ["./assets/font"],

      如果在构建字体后不支持，则在根级别添加此文件：

react-native.config.js

 module.exports = 
    project: 
        ios: ,
        android: ,
    ,
    assets: ['./assets/fonts']
    ;
    ex: 字体名称 -> Robotto-Regular.ttf 然后在样式中像下面这样使用它： 
fontFamily: 'Robotto-Regular'
    运行 react-native 链接 然后在android端（android studio）和ios端（Xcode）同步项目。 运行 react-native run-android 或 react-native run-ios

这应该可以解决不支持字体的任何错误，您可以使用自定义字体。

【讨论】：

【参考方案8】：

创建一个文件，即 defaultconfig.js

在这个文件中添加字体然后使用

在fontfamily:''montoface 的小部件中

【讨论】：

以上是关于如何在Vue或React项目中使用自定义字体,以及字体打包的主要内容，如果未能解决你的问题，请参考以下文章

如何在 Laravel TailwindCss Vue Js 项目中添加和使用本地自定义字体？

如何将自定义字体系列添加到 react-reader npm

在 vue 中使用自定义 icon 笔记

在 React 本机 Webview 中使用自定义字体

自定义字体不适用于 React-Native 0.62

如何将 expo react-native 自定义字体应用于整个容器