无法在 WebView React Native 中设置自定义字体

Question

<WebView
        {...this.props}
        startInLoadingState={true}
        originWhitelist={["*"]}
        scrollEnabled={false}
        javaScriptEnabled={true}
        style={[
          {
            height: this.state.webViewHeight,
            width: "96%",
            alignSelf: "center",
            paddingRight: 2,
            paddingLeft: 4,
            margin: 2,
          },
        ]}
        onNavigationStateChange={(event) => {
          let heightHtml;
          if (event.title) {
            const htmlHeight = Number(event.title); //convert to number
            this.setState({ webViewHeight: htmlHeight - htmlHeight / 2 });
            heightHtml = htmlHeight;
          }
          this.props.returnHeight ? this.props.returnHeight(heightHtml) : 0;
        }}
        source={{
          baseUrl: "",
          html: `
                <!DOCTYPE html>
                        <meta http-equiv="content-type" content="text/html; charset=utf-8">
                            <head>
                                <style type="text/css">
                                     for android
                                     @font-face {
                                        font-family: 'IRANSansMobile(FaNum)'; 
                                        src:url('file:///android_asset/fonts/IRANSansMobile(FaNum).ttf') format('truetype');
                                     }
                              </style>
                       </head>
                       <body>
                        
                            ${(this.props.body.replace(/(\r\n|\r|\n)/gm, ""))}
                       </body> 
            </html>
      `,
    }}
  />

我用这种风格
@font-face { font-family: 'IRANSansMobile(FaNum)'; src:url('file:///android_asset/fonts/IRANSansMobile(FaNum).ttf') 格式('truetype'); 为webview设置字体，但它不起作用

Answer 1


<WebView
        {...this.props}
        startInLoadingState={true}
        originWhitelist={["*"]}
        scrollEnabled={false}
        javaScriptEnabled={true}
        style={[
          {
            height: this.state.webViewHeight,
            width: "96%",
            alignSelf: "center",
            paddingRight: 2,
            paddingLeft: 4,
            margin: 2,
          },
        ]}
        onNavigationStateChange={(event) => {
          let heightHtml;
          if (event.title) {
            const htmlHeight = Number(event.title); //convert to number
            this.setState({ webViewHeight: htmlHeight - htmlHeight / 2 });
            heightHtml = htmlHeight;
          }
          this.props.returnHeight ? this.props.returnHeight(heightHtml) : 0;
        }}
        source={{
          html: `
                <html>
                    <head>
                         <meta name="viewport" content="width=device-width, initial-scale=1.0">
                             <style>
                                @font-face {
                                font-family: 'IRANSansMobile(FaNum)'; 
                                src: url('file:///android_asset/fonts/IRANSansMobile(FaNum).ttf');
                                     }
                            </style>
                <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
                     </head>
                       <body>
                            ${(this.props.body.replace(/(\r\n|\r|\n)/gm, ""))}
                       </body> 
            </html>
      `,
    }}
  />

无法在 WebView React Native 中设置自定义字体

问题描述

1 个解决方案

解决方案1
0 2020-08-19 10:53:26

无法在 WebView React Native 中设置自定义字体

问题描述

1 个解决方案

解决方案1 0 2020-08-19 10:53:26

解决方案1
0 2020-08-19 10:53:26