Question

在React原生Android Webview中使用本地自定义字体的正确方法是什么？我使用了很多方法，但是我不能这样做而且它不起作用我可以在我的应用程序的所有部分添加自定义字体，但只有webview是问题

 export default class buyProduct extends React.Component {
render() {
    const {product} = this.props;
    let htmlStyle = `
    <!DOCTYPE html>
    <html lang="fa">
        <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
    @font-face {
          font-family: 'sans' !important;
          src: url("../assets/fonts/IRANSansMobile.ttf") format("ttf"),
          url("../assets/fonts/IRANSansMobile_Bold.ttf") format("ttf"),
          url("../assets/fonts/IRANSansMobile_Light.ttf") format("ttf"), 
          url("../assets/fonts/IRANSansMobile_Medium.ttf") format("ttf") ,
          url("../assets/fonts/IRANSansMobile_UltraLight.ttf") format("ttf") !important;
          font-weight: normal;
          font-style: normal;
          font-variant: normal;
    }
     body {
            direction: rtl;
            font-family: sans !important;
       }
     *,

     *:after,
     *:before {
         -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
         font-family: sans !important;
       }
     body,html,label,p,span,li,ul,div,a,h1,h2,h3,h4,h5,h6{
       padding-left: 10px;
       padding-right: 10px;
       font-family: sans !important;
     }
     </style>
    </head>
    <body style="font-family: sans">
    <img style="margin-top: 20px" src= ${product._embedded['wp:featuredmedia'][0].source_url }>
    <p style=${{fontFamily : 'IRANSansMobile'}}>${product.title.rendered}</p>
    <p>${moment(product.date).fromNow()}</p>
    <p style="font-family: sans ">${product._embedded['wp:term'][0][0].name}</p>
    <div style="font-family: sans">
        ${product.content.rendered}
    </div>
    <a href="http://t.me/cotintgroup" target="_blank"><img src="https://cotintgroup.com/blog/wp-content/uploads/2017/11/banner-telegram-1.jpg"></a>
    </body>
    </html>

   `;
    return (
        <Container>
            <Header style={{backgroundColor: '#239963'}} androidStatusBarColor="#2c3e50" iosBarStyle="light-content">
                <Right>
                    <Button  transparent onPress={() => Actions.root('')}>

                        <Text style={{ fontFamily : 'IRANSansMobile' , color:'#fff' ,marginTop:5}}>??????</Text>

                        <Icon name='md-arrow-round-back'/>
                    </Button>
                </Right>
            </Header>

            <WebView source={{baseUrl: 'https://cotintgroup.com/blog/', html: htmlStyle }}

                     startInLoadingState={true}

                     renderLoading={this.renderLoading}

                     bounces={false}

                     scrollEnabled={true}

                     scalesPageToFit={(Platform.OS === 'ios') ? false : true}

                     javaScriptEnabled={true}
            />

        </Container>

    )

}

renderLoading() {

    return <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>

        <Spinner color="#2c3e50"/>
    </View>
}
}

这是我的反应原生应用程序的代码，我添加了我的字体，但字体在webview标签中不起作用

反应原生webview自定义字体系列

0 个答案: