代码之家 › 专栏 › 技术社区 › Mohsen Jalalian

反应本机WebView自定义字体系列

react-native ios android javascript

0

Mohsen Jalalian · 技术社区 · 8 年前

在React Native 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>
}
}

这是我的React Native应用程序代码,我添加了字体,但字体在WebView标签中不起作用。

0 回复 | 直到 8 年前