时间戳

首页 > 解决方案 > 将自定义字体加载到 Android 上的 React Native Webview

react-native - 将自定义字体加载到 Android 上的 React Native Webview

问题描述

我正在使用react-native-dynamic- fonts 在运行时注入动态字体。

我从 Google Fonts 下载了Spicy Rice，我正在使用它：

export default class App extends Component<Props> {
  componentWillMount() {
    loadFonts([{name: 'SpicyRice-Regular', data: font, type: 'ttf'}], true).then(function(names) {
      console.log('Loaded all fonts successfully. Font names are: ', names);
  });
  }
  render() {
    return (
      <View style={{flex: 1, marginTop: 150}}>
        <Text style={{fontFamily: 'SpicyRice-Regular', fontSize: 25, color: 'red'}}>Foo</Text>
        <WebView style={{ flex: 1, }} source={content} />
      </View>
    );
  }
}

我看到我的控制台日志并返回SpicyRice-Regular。但是，当我尝试在 Android 上的 WebView 中使用它时，它似乎不起作用。

我的 WebView 只是使用：

p {
    font-size: 150px;
    font-family: 'SpicyRice-Regular';
    font-weight: 400;
    font-style: normal;
  }

但是，它在 iOS 上呈现，但在 Android 上不呈现。

IOS：

在此处输入图像描述

安卓：

在此处输入图像描述

标签： react-nativefonts

解决方案

Android Webview 的字体不会瀑布流。就像 Chrome 浏览器一样，Webview 的每个实例都被沙箱化到自己的环境中。

不过，您确实可以访问文件系统，并且可以使用url("file:///android_asset/fonts/<filename>")Webview CSS 属性直接链接到字体资产，因此这样的事情应该可以工作：

p {
    font-size: 150px;
    font-family: 'SpicyRice-Regular';
    font-weight: 400;
    font-style: normal;
    src: url('file:///android_asset/fonts/SpicyRice-Regular.ttf')
  }

推荐阅读