Question

我将此solution to apply css 用于来自api的html文本。我面临的解决方案的问题是，我想像在任何网络中一样将自定义字体应用于html并用背景图像替换项目符号，但是它不起作用

注意：我附加的Webview有一些垃圾，因为我正在对其进行试验，通过查看代码，您可能已经猜到了我想要实现的目标，

请提出一个跨平台的解决方案或与我要达到的目标相当的任何库

谢谢。

我的CSS

 let htmlStyle = `<style>
                                @font-face {
                                    font-family:myFirstFont;
                                    src:url(file:///android_asset/fonts/Khand-Regular.ttf);
                                    font-weight: normal;
                                }
                                body{
                                    margin:0px 0px 0px 0px;
                                    padding: 0px 0px 0px 0px;  
                                    font-family:myFirstFont
                                }     

                            p{
                                color:#666666;
                                 font-size:5vw;
                                 font-family:myFirstFont;
                                 margin:0px 0px 0px 0px;
                                 padding: 0px 0px 0px 0px;
                            } 
                            h5{
                                color:#1AA154;
                                 font-family:myFirstFont;
                                 font-size:6vw;
                                 margin:2vw 0px 0vw 0px;
                                 padding: 0px 0px 0px 0px;

                             } 
                             li{
                                 background:url('../../assets/images/icons/tickIcon.png') contain; 
                                 color:#666666;
                                 font-size:5vw;
                                 font-family:Khand;
                                 margin:0px 0px 0px 0px;
                                    padding: 0px 0px 0px 0px;  
                                } 
                        </style>`

解决方案中所述的其他支持代码

let des = this.state.product.short_description ? this.state.product.short_description : this.state.product.description
let rawHTML = htmlStyle + des.replace("\n", "").replace(/("\/\/[c])\w/g, "\"https://cd").replace(/(width: 10.094%;)/g, "").replace(/(width: 84.906%;)/g, "")

我的WEBVIEW

<WebView allowUniversalAccessFromFileURLs={true} thirdPartyCookiesEnabled={true} mixedContentMode="always" originWhitelist={["*"]} scalesPageToFit={true} style={{height:60*vh,width:'100%',alignSelf:"baseline",fontFamily:Fonts.KR}} source={{html:rawHTML}}/>

这就是我在网络视图中得到的内容，我正在尝试设置样式

<p>Be the Ruler and the Leader of your Kingdom with these perfect accessories to your King&#8217;s Gown.</p> <h5>Includes</h5> <p>King&#8217;s Crown &#8211; metallic silver or gold</p>

如何在React Native WebView中使用本地保存的谷歌字体？

0 个答案: