Загрузка собственного шрифта в React Native Webview на Android

Question

Я использую response-native-dynamic-fonts для внедрения динамических шрифтов во время выполнения.

Я скачал Пряный рис с Google Fonts, и я использую его так:

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. Однако, когда я пытаюсь использовать его в моем WebView на Android, это, похоже, не работает.

Мой 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 помещается в изолированную среду.

Хотя у вас есть доступ к файловой системе, и вы можете напрямую связываться с ресурсом шрифта, используя url("file:///android_asset/fonts/<filename>") в свойствах CSS Webview, поэтому что-то вроде этого должно работать:

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