如何在html中加入字体库,网页中添加特殊字体解决方案
前言
今天总结一下网页中添加特殊字体的解决方案。一个字体一般情况下很大,少则1-2M,一般是4-6M,大的字体十几兆的都有。加载在网页中会导致速度变得很慢,因此,你在网页中很少看到有用特殊字体的原因。今天主要总结一下网页中运用特殊字体的一些解决方案。
方案一:(针对有针对性的展示,死的文字)
目前市面上有很多字体压缩的方案,但是都是提供了具体的字体库,也就是你网页中用的文字,都在字体库里面,不在里面则网页中就不会展示。
这种方案有明显的缺点,只适合死的文字展示,不适合动态添加。
方案二:运用woff2网页字体
但是坑爹的问题来了,转换后的字体体积变得异常的小,我原来6m的字体,转换后才十几kb。我在网页中引用了转换后的字体,发现对中文无效,转换后只剩下英文了。
方案三:这是个传说
传说可以将字体转为js,然后通过加载js的方案来加载字体,该方式线上已经停止维护,地址是:http://cufon.shoqolate.com/generate/
感兴趣的可以下载下来,运行一下试一试。【只是一个工具源码,运行起来,上传字体转换一下试试】
方案四:我的解决方案
上面的三种方案都不适合我,我要在类似一个编辑器的页面,不停的切换字体。字体是用户输入的,我不知道用户会输入什么,因此,上面的方案对我来说全部都不适合。
我的方案思路:
字体虽然比较大,但是我可以异步加载,就是初始化的时候不加载字体,等用户用到了再加载,加载时按需加载,不是全部加载,用到哪个字体,就加载哪个字体。然后先判断用户电脑里面安装了这个字体没有,安装了就用本机的,没有安装再用线上的。
下面上一下我的代码【vue版本】
html如下:
汉仪意宋简
汉仪中黑简
汉仪中等线简
汉仪雪君体简
汉仪新人文宋简
然后监听字体的变化:
watch: {
'templateData.currentItem.fontFamily': {
immediate: true,
handler(val) {
this.changeFont(val)
}
}
}
修改字体的函数如下:
changeFont(font) {
this.appendArray.push(font) //判断头部有没有插入样式的数组
const styles = `@font-face {
font-family:'${font}';
src: local('${font}'),
url('/static/fonts/${font}.ttf');
}`
this.addCssByStyle(styles)
},
判断数组中有没有重复元素的函数(用正则):
repeatornot(array) {
return /(\x0f[^\x0f]+)\x0f[\s\S]*\1/.test('\x0f' + array.join('\x0f\x0f') + '\x0f')
}
增加到头部样式中的函数:
addCssByStyle(cssString) {
// console.log(this.repeatornot(this.appendArray), this.appendArray)
if (!this.repeatornot(this.appendArray)) { // 判断头部样式中有没有新增,假如头部中有了这个字体,就不添加了,没有就添加
let doc = document
let style = doc.createElement('style')
style.setAttribute('type', 'text/css')
if (style.styleSheet) { // IE
style.styleSheet.cssText = cssString
} else { // w3c
let cssText = doc.createTextNode(cssString)
style.appendChild(cssText)
}
let heads = doc.getElementsByTagName('head')
if (heads.length) { heads[0].appendChild(style) } else { doc.documentElement.appendChild(style) }
}
},
核心代码就在上面,另外附上判断用户电脑里面是否安装了某个字体的函数库:
var isSupportFontFamily=function(f){if(typeof f!="string"){return false}var h="Arial";if(f.toLowerCase()==h.toLowerCase()){return true}var e="a";var d=100;var a=100,i=100;var c=document.createElement("canvas");var b=c.getContext("2d");c.width=a;c.height=i;b.textAlign="center";b.fillStyle="black";b.textBaseline="middle";var g=function(j){b.clearRect(0,0,a,i);b.font=d+"px "+j+", "+h;b.fillText(e,a/2,i/2);var k=b.getImageData(0,0,a,i).data;return[].slice.call(k).filter(function(l){return l!=0})};return g(h).join("")!==g(f).join("")};
语法:
isSupportFontFamily(fontFamily);
小结
以上就是我总结的实现网页中添加特殊字体的集中方案,假如你有更好的方案,欢迎留言给我!
如何在html中加入字体库,网页中添加特殊字体解决方案相关推荐
- 用字体在网页中画Icon图标
第一步,下载.IcoMoon网站选择字体图标并下载,解压后将fonts文件夹放在工程目录下.fonts文件夹内有四种格式的字体文件: 注:由于浏览器对每种字体的支持程度不一致,要想在所有浏览器中都显示 ...
- 在asp.net中如何用javascript读取本地Xml中的数据到网页中的文本框?
在asp.net中如何用javascript读取本地Xml中的数据到网页中的文本框? 转载于:https://www.cnblogs.com/dynasty/archive/2005/08/18/21 ...
- 网页表格线框html,关于Dreamweaver中怎么让html网页中的table边框细线显示?
关于Dreamweaver中怎么让html网页中的table边框细线显示? 对于不是编程的我们,用Dreamweaver制作表格的`情况下.默认表格边框会标的比较粗,今天给大家介绍下制作西表格超级简单 ...
- Android 系统(72)---Android系统增加字体库及修改系统默认字体
Android系统增加字体库及修改系统默认字体 阅读数:53 转载出处:https://blog.csdn.net/hsaekong/article/details/80305263 前言 最近项目上 ...
- php提取网页mp3,怎么提取网页中的音乐|下载网页中的音乐 网页音乐提取工具及使用教程分享...
相信很多人都比较了解怎么下载网页上的视频吧,那么现在怎么提取网页中的音乐或者说怎么下载网页中的音乐 ,嗯~ o(* ̄▽ ̄*)o ,不懂的孩纸,路过走过不要错过啦,快来看看小编分享的网页音乐提取工具及使 ...
- java安卓字体_Android中添加外部字体库和竖直排列字体
一.在Android开发中会遇到系统提供的字体并不能满足自己对字体的设计需要,这就需要引进外部字体库了.下面简述一下如何引入外部字体库. 1>在自己工程文件目录下新建一个assets文件夹,在a ...
- 百度地图如何在html中显示图片,在网页中插入百度地图(实例)
获取代码如下:(注意:通常我们在网页中只要插入以下代码,小虫标注出来,其余的可不用.) 1.在 间插入下面代码:这是样式和JS脚本. html,body{margin:0;padding:0;} .i ...
- 如何在html中加入音效,给网页中的按钮和图片添加声音
Loud links-是一款大小只有1.5KB的WEB音效插件,可以实现网页中按钮与图片等元素的触发交互,比如鼠标放上去后出现响声,或者鼠标点击后出现响声.Loud links使用相当简单. 使用方法 ...
- 图片转web字体库,如何制作web字体库
最近项目上用到了很多svg图,设计师经常频繁改版,苦不堪言,于是就想到了把图片转成字体库来使用. 使用图片的缺点: 1. 图片加载速度慢 2. 图片大小固定,无法调节 3. 当代码重构或者图片目录位置 ...
- Android系统增加字体库及修改系统默认字体
转载请注明出处:https://blog.csdn.net/hsaekong/article/details/80305263 前言 最近项目上需要修改android系统默认字体,现把总结记录下,便于 ...
最新文章
- 读自动驾驶激光雷达物体检测技术(Lidar Obstacle Detection)(4):Clustering(欧式聚类)
- 理解OpenCV中的宏定义 CVAPI(函数返回类型)
- 【bzoj2238】Mst(树链剖分+线段树)
- 5 华为兼容性 双指缩放_华为EMUI10“滚屏翻译”之背后的学问
- 基于windows平台的命令行软件安装工具Chocolatey的安装
- mysql语句表名大小写敏感_Mysql 表名大小写敏感
- Leetcode | 107. Binary Tree Level Order Traversal II
- [react] 和Component两者的区别是什么
- oracle中order by 2,关于oracle中ROWNUM和ORDER BY的问题(2)
- 如何在修改了默认值之后跟新
- Linux Apache Mysql PHP典范设置装备安排-2
- Android7.1 Offload模式下的音频数据抽取过程
- CVPR2022 Canonical Voting: Towards Robust Oriented Bounding Box Detectionin 3D Scenes
- Scala编程语言入门(3)
- ThreeJS 骨架图显示、骨骼修改颜色
- _012_IDEA_idea 创建工作空间(空项目) 项目组
- 西游记笔记与想法(3)
- 拼多多商家和快递公司谈合作的技巧
- 计算机系统不认,u盘电脑不识别了如何修复 电脑不识别U盘怎么处理 - 云骑士一键重装系统...
- python无人机路径规划算法_无人机集群——航迹规划你不知道的各种算法优缺点...
热门文章
- Vue 2.0 + Axios + Vue Router 实现CNode社区
- NodeJs 多核多进程并行框架实作 - CNode
- 字体大宝库:40款为网页设计师准备的时尚字体【上篇】
- 怎么用计算机画图工具,使用电脑自带画图工具(画图软件怎样操作的方法
- 使用struts框架接受http请求过来的get和post数据的方法:
- 帆软mysql迁移_平台数据迁移- FineReport帮助文档|报表开发|报表使用|学习教程
- Windows 上好用的7款下载工具
- ABB机器人编程软件RobotStudio迅雷下载网盘下载
- kali linux 黑别人电脑,如何使用 Kali Linux 黑掉 Windows
- python网络编程 1