在React原生Webview中使用自定义字体
我在整个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中使用本地自定义字体的正确方法是什么？
共有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 }}
/>
使用url（“”）在webview css中创建字体file:///android_asset/fonts/Lohit-Gujarati）如果在WebView上设置了baseUrl，则可以使用：
<WebView
source={{html, baseUrl: 'someUrl'}}
style={{flex: 1}}
/>
我不知道为什么没有baseUrl它就不能工作，但我认为这可能是因为当缺少baseUrl时，RN使用不同的方法来加载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);
}
-
我想更改加载到WebView中的html字符串的字体，类似于本问题中提到的： 如何在Android中更改Webview的字体？ 不同之处在于，我并没有使用旧的方法将字体文件存储在assets文件夹中，而是将它们存储在res/font中，如“Fonts in XML”android字体支持文档中所述： https://developer.android.com/guide/topics/ui/loo
-
支持和小程序的原生自定义组件混用，使用方式和原生的使用方式没有区别。在引用时在页面 js 入口配置 config.usingComponents。 export default { config: { usingComponents: { comp: 'path/to/components/comp/index' } } } 另外还需要在 webpack 中配
-
当我将资产/字体中的自定义字体应用于本地html时。我只是像下面这样设置字体@font-face{font-Family：'my'字体；src： url（'file：///android_asset/fonts/my'字体）；}但是，当我使用loadUrl（“远程html url”）时，上面的代码不起作用。有一个好主意吗？ 下面的链接显示本地字体和本地html的示例代码。如何在Android中更改
-
我试图在android中为react原生开发原生模块。与https://facebook.github.io/react-native/docs/native-modules-android.html#content的链接完全一致 但它给了我错误 我已经实现了toastandroid.js 然后在其他Jsfiles中尝试使用
-
问题内容： 我的应用程序正在使用JSoup下载留言板页面的HTML（在这种情况下，它是包含给定线程帖子的页面）。我想使用此HTML，去除不需要的项目，并应用自定义CSS对其进行样式设置使其在WebView中“可移动”。 我应该在处理样式时将样式注入HTML中（因为无论如何还是要处理样式），还是有一种很好的方法将CSS文件添加到我的应用程序资产中并简单地引用它。我认为后者将是理想的，但不确定如何实现
-
问题内容： 我正在尝试在使用wkhtmltopdf生成的PDF中使用自定义字体。我读到您不能使用google webfonts，而wkhtmltopdf使用truetype .ttf文件。谁能确认？因此，我从Google webfont下载了一个.ttf文件，并将其放入服务器中，然后使用了字体： 和字体系列： 现在应该以Jolly Lodger字体呈现的文本根本没有出现，页面为空白。 我究竟做错了