Question

我想在我的应用中使用谷歌字体的字体。 Here is the font

我已将.ttf文件放在app/fonts中。

的package.json：

{
    "name": "xxx",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start",
        "test": "jest"
    },
    "rnpm": {
        "assets": ["./app/fonts"]
    },
    "jest": {
        "preset": "react-native",
        "moduleNameMapper": {
            "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
            "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
        }
    },
    "dependencies": {
        "flow-typed": "^2.0.0",
        "immutable": "^3.8.1",
        "react": "~15.4.1",
        "react-native": "0.42.0",
        "react-native-vector-icons": "^4.0.0",
        "react-redux": "^5.0.3",
        "redux": "^3.6.0",
        "redux-immutable": "^4.0.0",
        "redux-observable": "^0.14.1",
        "rxjs": "^5.2.0"
    },
    "devDependencies": {
        "babel-eslint": "^7.1.1",
        "babel-jest": "19.0.0",
        "babel-preset-react-native": "1.9.1",
        "eslint": "^3.17.0",
        "eslint-plugin-flowtype": "^2.30.3",
        "eslint-plugin-jsx": "^0.0.2",
        "eslint-plugin-react": "^6.10.0",
        "eslint-plugin-react-native": "^2.3.1",
        "flow-bin": "^0.42.0",
        "jest": "19.0.2",
        "jest-cli": "^19.0.2",
        "react-test-renderer": "~15.4.1",
        "redux-devtools": "^3.3.2",
        "remote-redux-devtools": "^0.5.7"
    }
}

然后运行react-native link。

然后在我的应用中使用该字体：

import { View, Text } from 'react-native'
import React from 'react'
import Width from '../width/Width'
import Shape from '../shape/Shape'
import Height from '../height/Height'
import Thickness from '../thickness/Thickness'

export const Volcalc = () => (
  <View style={styles.container}>
    <Text style={styles.text}>SHAPE</Text>
    <Shape />
    <Text style={styles.text}>HEIGHT</Text>
    <Height />
    <Text style={styles.text}>WIDTH</Text>
    <Width />
    <Text style={styles.text}>THICKNESS</Text>
    <Thickness />
  </View>
)

const $mainColor = '#00d1b2'
const styles = {
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: $mainColor
  },
  text: {
    textAlign: 'center',
    color: 'rgba(255, 255, 255, 0.9)',
    fontSize: 15,
    fontFamily: 'Orbitron'
  }
}

在android中它不显示新字体但没有错误。在ios中它有错误：

无法识别的字体系列“Orbitron”

我做错了什么？

如何找到要放在fontFamily: 'xxx'中的EXACT值？

Answer 1

我发现对于某些字体，您需要运行npx react-native-asset才能使其在Android上运行。如果它在第三方组件中不起作用，则必须添加fontWeight: 'normal'来覆盖一些默认值。

Answer 2

看起来您没有正确链接，或者您的应用只是没有加载新资源。

添加

"rnpm": {
    "assets": ["./app/fonts"]
}

到你的package.json。

然后

rm -rf node_modules && npm install && react-native link

如果情况正确，请在android/app/src/main/assets/fonts/内搜索自定义字体。如果你看到它，你就成功链接了。

对于iOS，同样运行XCode并展开自定义字体的“资源”下拉列表。

杀死你的模拟器并重新尝试

react-native run-ios

Answer 3

确保字体仅为小写，并遵循以下模式：fontname.ttf，fontname_bold.ttf，fontname_light.ttf，fontname_bold_italic.ttf

Answer 4

React Native中的字体以与本机应用程序相同的方式处理，作为本机项目的资产。

在iOS中，您必须将它们添加为资源。你可以有一个很好的描述here。

在Android中，您必须将它们添加为资源。 Here你可以看到如何。

另请注意，iOS中字体的名称是.ttf文件元数据中包含的字体，而在Android中，它们由文件名和几个后缀匹配。

Answer 5

路径可能未正确链接-

react-native链接存储字体的路径为-android/src/main/assets/fonts

路径应为- android/app/src/main/assets/fonts

即使使用本机版本0.62，此问题仍然存在

Answer 6

要查找用作fontFamily的确切值，可以在xcode中将以下代码添加到AppDelegate.m文件后，从xcode运行项目。你会在xcode的输出部分看到一个字体列表。

for (NSString* family in [UIFont familyNames])
{
    NSLog(@"%@", family);

    for (NSString* name in [UIFont fontNamesForFamilyName: family])
    {
        NSLog(@"  %@", name);
    }
}

添加自定义字体的有用链接：http://codewithchris.com/common-mistakes-with-adding-custom-fonts-to-your-ios-app/

Answer 7

如果有人正在阅读此书，因为它们的设置很好并且自定义字体在iOS上可以运行，并且在某些情况下在Android上无法运行：

除上述给出的安装答案外，请确保未设置字体fontWeight参数（或其他样式中的额外字体转换）。就我而言，它“打破了”自定义字体，因此我不得不添加并使用带有变体的ttf字体（例如Roboto-Thin，Roboto-Bold等），而不是设置粗体样式。

还值得注意的是：Manuel Hernandez在下面的评论中发现，可以使用fontWeight:800代替fontWeight:'bold'。

Answer 8

要链接字体，您可以进行react-native link .src/assets/fonts

  "rnpm": {
    "assets": [
      "./src/assets/fonts/"
    ]
  }

这应该将./src/assets/fonts/中的所有字体复制到ios项目库和android / app / src / main / assets / fonts /文件夹中。在ios中，它还会更新info.plist文件。

现在，在重建项目后，必须使用链接的字体的PostScript Name才能使用它。

Answer 9

这些步骤对我有用。

将字体添加到yourproject/assets文件夹中。
然后将"rnpm": {"assets": ["./assets/fonts/"]}添加到package.json文件中。
运行react-native link
检查字体是否已添加到yourproject/android/app/src/main/assets/fonts（对于android）
必须运行react-native run-android才能进行更改。（大多数人都忘记运行此操作）

Answer 10

对于版本<0.60的react-native，自定义字体有很多答案。

对于使用本机版本> 0.60 ， 'rnpm' is deprecated 和自定义字体的用户将无效。

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

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

2-将此添加到该新文件中

module.exports = {
project: {
    ios: {},
    android: {},
},
assets: ['./assets/fonts']
};

在根项目路径中

3-运行react-native link命令。

Answer 11

在这里加上两美分是因为我花了四个小时才弄清楚：检查您的字体是否为“有效”。在Mac上，您可以在“字体簿”>“文件”>“验证字体”中执行此操作。 React-Native链接不会引发任何错误，Android Studio或Xcode也不会引发任何错误。因此，如果您的字体损坏了，它将被忽略，您也不知道为什么。为了使它有效，我从“字体书”中将其导出，然后再次运行react-native link命令。希望对别人有帮助。

Answer 12

这个问题的答案是

删除 fontWeight 属性样式，它会起作用！

我删除了它并立即获得了我的 poppins 字体样式。

Answer 13

删除默认样式属性（例如fontWeight）也可以解决此问题。

自定义字体在React Native

13 个答案: