将自定义字体加载到Android上的React Native Webview中

Question

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

我从Google字体下载了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：

Android：

Answer 1

Android Webview的字体不漏水。就像Chrome浏览器一样，每个Webview实例都沙盒化到自己的环境中。

尽管您确实有权访问文件系统，但是可以使用Webview CSS属性中的url("file:///android_asset/fonts/<filename>")直接链接到字体资产，因此这样的方法应该起作用：

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