react-native-web 阿里字体图标ttf文件不加载、乱码问题

前言

本文基于

“react-native”: “^0.70.0”
“react-native-web”: “^0.18.9”

问题：

1.安装依赖

yarn add url-loader --dev

2.配置webpack.config.js

include：存放字体图标文件的相对路径

module.exports = {...module: {rules: [...{test: /\.ttf$/,loader: 'url-loader',include: path.resolve(__dirname, './src/assets/fonts/iconfont.ttf'),}]},
}

3.修改 index.web.js 文件

import { AppRegistry } from 'react-native';
import App from './App.tsx';AppRegistry.registerComponent('App', () => App);AppRegistry.runApplication('App', {rootTag: document.getElementById('root')
});// 存放字体图标文件的相对路径
import iconFont from './src/assets/fonts/iconfont.ttf';
const iconFontStyles = `@font-face {src: url(${iconFont});font-family: 'iconfont';
}`;// 创建样式表
const style = document.createElement('style');
if (style.styleSheet) {style.styleSheet.cssText = iconFontStyles;
} else {style.appendChild(document.createTextNode(iconFontStyles));
}// 添加到head
document.head.appendChild(style);

4.效果图

如果本篇文章对你有帮助的话，很高兴能够帮助上你。

当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。

react-native-web 阿里字体图标ttf文件不加载、乱码问题相关推荐

react native 使用阿里字体图标库
前言本文基于 "react-native": "^0.70.0" 1.下载iconfont图标文件将iconfont图标文件放置在src/assets/fo ...
react native关于自定义字体图标android和IOS的处理
2019独角兽企业重金招聘Python工程师标准>>> **``` icon处理:https://icomoon.io/app/#/select 主要是得到各种字体格式和sectio ...
阿里字体图标之Symbol用法
第一步:下载阿里字体图标Symbol文件包并解压. 第二步:把压缩后的文件全部放入自己的项目文件中. 第1步:引入项目下面生成的 symbol 代码: <script src="./i ...
react引入阿里字体图标iconfont
移动端开发过程中,字体图标几乎是不可缺的,本文将介绍如何使用阿里字体图标,已方便练手的时候使用. 第一步:制作字体图标 1.首先进入阿里巴巴矢量图网站:http://www.iconfont.cn/ ...
如何在uniapp中引入阿里字体图标
在阿里字体图标里面点击下载到本地然后将解压出来的文件放到static目录下,我的是static/font 然后在App.vue中引入 @import url("./static/font/ ...
uni-app之阿里字体图标转base64方法
uni-app之阿里字体图标转base64方法 uni-app开发过程中发现小程序端不能直接使用字体图标,需先转成base65方可使用,转换方式如下. 一.转换步骤 1.1 从iconfont下载字体 ...
【uniapp引入阿里字体图标】
uniapp引入阿里字体图标引入阿里字体图标引入阿里字体图标链接奉上 uni-app字体图标阿里图标官网 nvue中不可直接使用 css 的方式引入字体文件,需要使用以下方式在 js 内引入. ...
vue中使用element-ui 图标和阿里字体图标结合使用
vue中使用element-ui 图标和阿里字体图标结合使用 1 登录阿里字体图标官网 2 图标管理 --> 我的项目 --> 创建一个项目 3 开始搜有想要的图标添加到我的项目中 4 ...
Web前端：React Native Web与React — 比较指南
React 是Facebook开发的用于构建交互式用户界面的JavaScript库.React 在 Apache 许可下作为开源软件提供,可用于个人和商业网站.客户端 Web 应用程序和服务器应用 ...

react-native-web 阿里字体图标ttf文件不加载、乱码问题

react-native-web 阿里字体图标ttf文件不加载、乱码问题相关推荐

最新文章

热门文章