Как установить пользовательские шрифты в WebView (react-native-webview) в iOS?

Я хочу установить пользовательские шрифты в Webview. Я реализовал следующий код:

@font-face {
    font-family: 'Poppins-Bold'; 
    src:url('file:///android_asset/fonts/Poppins-Bold.ttf') format('truetype')
}
body{
    font-family: Poppins-Bold
    margin: 0;
    padding: 0;
    color: red;
}

Он отлично работает в Android, но не работает в iOS. Дайте мне знать, если у кого-нибудь есть решение для этого.

Примечание. Я не хочу использовать шрифт Google CSS


ios react-native react-native-webview
person immodi    schedule 31.03.2020    source источник
comment
immodi Вы решили эту проблему? Я сталкиваюсь с той же проблемой   -  person German    schedule 04.05.2021
comment
@Немец, извини, приятель, я не смог найти для этого решения.   -  person immodi    schedule 04.05.2021

Ответы (1)


arrow_upward
0
arrow_downward

  1. Set the following font URL based on platform: 
    const fontUrl = Platform.select({
    ios: "Poppins-Bold.ttf",
    android: "file:///android_asset/fonts/Poppins-Bold.ttf",
});
  2. Update your CSS styles to the following: 
     const css = `
     @font-face {
        font-family: 'Poppins-Bold'; 
        src: local('Poppins-Bold') url('${fontUrl}') format('truetype')
     }
     body {
        font-family: Poppins-Bold
        margin: 0;
        padding: 0;
        color: red;
     }`
    • Note that format('truetype') is used since your font extension is ttf. If you're using an eot font you'll need to use format('opentype').
  3. Once you do that, update your WebView component with the following props: 
    <WebView 
    source={{ html, baseUrl: '' }}
    originWhitelist={["*"]}
/>
    • Setting baseUrl to blank will ensure fonts are loaded. Reference this post.
    • Без установки originWhitelist вы получите сообщение об ошибке на iOS, что URL-адрес не может быть найден.

Это сработало для меня как на Android, так и на iOS, и я также использую Poppins ????

person German    schedule 05.05.2021
comment
Спасибо за обновление. Я проверю это решение. Я думаю, что ваш код имеет смысл. - person immodi; 07.05.2021