【问题标题】:How can i use same custom fonts for both android and ios using react native如何使用 react native 为 android 和 ios 使用相同的自定义字体
【发布时间】:2016-01-05 11:10:52
【问题描述】:

我正在使用 react native 为 ios 和 android 使用相同的代码。现在在我的项目中,我想对两者都使用自定义字体。我知道如何为 ios 应用自定义字体,但那些相同的字体如何也适用于 android?

//新样本

我在下面添加了自定义字体 示例/android/app/src/main/assets/fonts/gillsans-italic.ttf 我 在 CustomFontTest 组件中应用了这个 gillsans-italic.ttf 字体 如下所示

var CustomFontTest = React.createClass({
      render:function(){
         return (<View><Text style={styles.customFont}>CustomFont</Text></View>)
      }
})
var styles = StyleSheet.create({
    customFont:{
        fontFamily:'gillsans-italic',
        fontSize:14,
        color:'#efefef'
    }
})

【问题讨论】:

    标签: javascript jquery reactjs react-native


    【解决方案1】:

    把你的字体放在android/app/src/main/assets/fonts下。

    它们必须根据字体系列名称命名。以下是支持的内容:

    {{fontName}}.otf
    {{fontName}}_bold.otf
    {{fontName}}_bold_italic.otf

    您可以将 .otf 替换为 .ttf。 {{fontName}} 是您传递给组件的 style 属性的名称。

    【讨论】:

    • 我和你解释的一样,但我没有在 android 中获得自定义字体。我用上面的新代码示例进行编辑
    • 您的字体系列仍应为“gillsans”,您应将fontStyle 设置为斜体。
    • 字体家族本身是斜体,我应用到ios的字体家族没有设置任何fontStyle属性。对于android是否需要再次应用fontStyle属性
    • 这对我有用。如果字体名称是Lato-Light.ttf,那么样式表应该是fontFamily: "Lato-Light",你必须用react-native run-android重新打包应用程序
    • 目前没有很好的记录。这个答案非常有效。我唯一要添加的是从 android studio 的文件名中删除“-”。比如我把Lato-Light.ttf改成LatoLight.ttf
    猜你喜欢
    • 2023-03-26
    • 1970-01-01
    • 2021-04-11
    • 2017-05-25
    • 2015-06-01
    • 1970-01-01
    • 2020-07-16
    • 2017-09-06
    • 1970-01-01
    相关资源
    最近更新 更多