在 React 本机 Webview 中使用自定义字体
Posted
技术标签:
【中文标题】在 React 本机 Webview 中使用自定义字体【英文标题】：Using custom fonts in React native Webview 【发布时间】：2017-08-14 01:54:26 【问题描述】：我在整个 React 本机应用程序中使用自定义字体。我已经使用 react-native link 命令链接了它们。除了 android 的 Webview 组件之外，它们在任何地方都可以工作。它在 ios Webview 中正常工作。
import React, Component from "react"
import View, StyleSheet, Text, WebView, ScrollView, Image from "react-native"
import htmlView from "react-native-htmlview"
export class PostDetailPage extends Component
static navigationOptions =
title: ( state ) => state.params.post.title,
header:
style:
backgroundColor: '#FF9800',
,
titleStyle:
color: 'white',
fontFamily: "Ekatra",
fontWeight: "normal"
,
tintColor: 'white'
constructor(props)
super(props)
render()
const post = this.props.navigation.state.params.post
const html = `
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body
font-family: Lohit-Gujarati;
font-size: 1.25rem;
color: black;
padding: 0px 10px 10px 10px;
p
text-align: justify;
</style>
</head>
<body>
$post.content
</body>
</html>
`
return (
<View style= flex: 1, overflow: "visible" >
<Image source= uri: post.featured_image style= height: 150 />
<WebView
source=html
style=flex: 1
/>
</View>
)
我尝试使用 url("file:///android_assets/fonts/Lohit-Gujarati") 在 webview css 中创建字体。它不起作用。导入谷歌字体 css 工作。在 React 原生 Android Webview 中使用本地自定义字体的正确方法是什么？
【问题讨论】：
你能发布你的好字体实验吗？它应该可以工作。 @SagarKhatri：让我知道你想要什么更多信息。很遗憾，我无法发布整个项目。 不是整个项目，你说你试过谷歌字体。那你能贴一下这段代码吗？ @SagarKhatri：谢谢。它适用于谷歌字体 css 导入。不知道为什么它以前不起作用。有什么方法可以使用项目中已经链接的本地字体？ 我对此一无所知。对不起。 【参考方案1】：如果在 WebView 上设置了 baseUrl，则使用 url("file:///android_asset/fonts/Lohit-Gujarati") 在 webview css 中创建字体：
<WebView
source=html, baseUrl: 'someUrl'
style=flex: 1
/>
我不确定为什么没有 baseUrl 就不能工作，但我认为可能是因为 RN 在缺少 baseUrl 时使用了不同的方法来加载 WebView：
if (source.hasKey("baseUrl"))
view.loadDataWithBaseURL(
source.getString("baseUrl"), html, HTML_MIME_TYPE, HTML_ENCODING, null);
else
view.loadData(html, HTML_MIME_TYPE, HTML_ENCODING);
【讨论】：
这可行，但正确的网址是url("file:///android_asset/fonts/<filename>")，单数。
@mihai1990 你能告诉我在 baseUrl 中设置什么吗？
@Sujit 据我所知，您可以将任何字符串设置为 baseUrl 以使自定义字体在 WebView 中工作。
@mihai1990 你能举个例子baseUrl中的字符串是什么吗？
@joshua14 正如我上面所说，它可以是任何字符串。即使从答案中逐字复制“someUrl”也应该有效。但是这个答案来自近 2 年前，我不确定它是否仍然适用于最新的 react native。【参考方案2】：
此代码适用于我。
var css = `<head><style type="text/css"> @font-face font-family: 'BYekan'; src:url('file:///android_asset/fonts/B Yekan.ttf')</style></head>`;
var HTML = css + `<p style='font-family:BYekan'>Some Text</p>`
<WebView
source= baseUrl: '', html: HTML
/>
【讨论】：
以上是关于在 React 本机 Webview 中使用自定义字体的主要内容，如果未能解决你的问题，请参考以下文章
如何在 iOS 的 WebView(react-native-webview) 中设置自定义字体？
如何在WebView中禁用用户文本选择[React-Native]