Javascript react本机webview自定义字体系列
在本机Android Webview中使用本地自定义字体的正确方法是什么？ 我用了很多方法，但我不能做到这一点，这是不工作的 我可以在我的应用程序的所有部分添加自定义字体，但只有webview有问题Javascript react本机webview自定义字体系列,javascript,android,ios,react-native,Javascript,Android,Ios,React Native,在本机Android Webview中使用本地自定义字体的正确方法是什么？ 我用了很多方法，但我不能做到这一点，这是不工作的 我可以在我的应用程序的所有部分添加自定义字体，但只有webview有问题 export default class buyProduct extends React.Component { render() { const {product} = this.props; let htmlStyle = ` <!DOCTYPE html>
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>
}
}
导出默认类buyProduct扩展React.Component{
render（）{
const{product}=this.props；
设htmlStyle=`
@字体{
字体系列：“sans”！重要；
src:url（“../assets/fonts/iransmobile.ttf”）格式（“ttf”），
url（“../assets/fonts/iransamobile_Bold.ttf”）格式（“ttf”），
url（“../assets/fonts/iransamobile_Light.ttf”）格式（“ttf”），
url（“../assets/fonts/iransamobile_Medium.ttf”）格式（“ttf”），
url（“../assets/fonts/iransamobile_UltraLight.ttf”）格式（“ttf”）！重要；
字体大小：正常；
字体风格：普通；
字体变体：正常；
}
身体{
方向：rtl；
字体系列：sans！重要；
}
*,
*：之后，
*：之前{
-webkit框大小：边框框；
-moz框大小：边框框；
字体系列：sans！重要；
}
正文，html，标签，p，span，li，ul，div，a，h1，h2，h3，h4，h5，h6{
左侧填充：10px；
右边填充：10px；
字体系列：sans！重要；
}
${product.title.rendered}
${moment（product.date）.fromNow（）}
${product.\u嵌入['wp:term'][0][0].name}
${product.content.rendered}
`;
返回(
Actions.root（“”）}>
??????
)
}
renderLoading（）{
返回
}
}