网页中添加特殊字体解决方案

前言

今天总结一下网页中添加特殊字体的解决方案。一个字体一般情况下很大,少则1-2M,一般是4-6M,大的字体十几兆的都有。加载在网页中会导致速度变得很慢,因此,你在网页中很少看到有用特殊字体的原因。今天主要总结一下网页中运用特殊字体的一些解决方案。

方案一:(针对有针对性的展示,死的文字)

目前市面上有很多字体压缩的方案,但是都是提供了具体的字体库,也就是你网页中用的文字,都在字体库里面,不在里面则网页中就不会展示。

Fontmin :ecomfe.github.io/fontmin/#ba...

文蜘:font-spider.org/

这种方案有明显的缺点,只适合死的文字展示,不适合动态添加。

方案二:运用woff2网页字体

这个可以参考张鑫旭的一篇文章:www.zhangxinxu.com/wordpress/2...

看了张鑫旭的文章之后,我用www.fontsquirrel.com/tools/webfo... 将我的ttf转换为woff2和woff

但是坑爹的问题来了,转换后的字体体积变得异常的小,我原来6m的字体,转换后才十几kb。我在网页中引用了转换后的字体,发现对中文无效,转换后只剩下英文了。

方案三:这是个传说

传说可以将字体转为js,然后通过加载js的方案来加载字体,该方式线上已经停止维护,地址是:cufon.shoqolate.com/generate/

但是他的github中还保留源代码github.com/sorccu/cufo...

感兴趣的可以下载下来,运行一下试一试。【只是一个工具源码,运行起来,上传字体转换一下试试】

方案四:我的解决方案

上面的三种方案都不适合我,我要在类似一个编辑器的页面,不停的切换字体。字体是用户输入的,我不知道用户会输入什么,因此,上面的方案对我来说全部都不适合。

我的方案思路:

字体虽然比较大,但是我可以异步加载,就是初始化的时候不加载字体,等用户用到了再加载,加载时按需加载,不是全部加载,用到哪个字体,就加载哪个字体。然后先判断用户电脑里面安装了这个字体没有,安装了就用本机的,没有安装再用线上的。

下面上一下我的代码【vue版本】

html如下:

ini 复制代码
<select class="inlineblock" v-model="templateData.currentItem.fontFamily" :disabled="templateData.currentItem.suoding">
	  <option value="HYYiSongJ">汉仪意宋简</option>
          <option value="HYZhongHeiJ">汉仪中黑简</option>
          <option value="HYZhongDengXianJ">汉仪中等线简</option>
          <option value="HYXueJunTiJ">汉仪雪君体简</option>
          <option value="HYXinRenWenSongJ">汉仪新人文宋简</option>
</select>

然后监听字体的变化:

kotlin 复制代码
  watch: {
    'templateData.currentItem.fontFamily': {
      immediate: true,
      handler(val) {
        this.changeFont(val)
      }
    }
  }

修改字体的函数如下:

scss 复制代码
changeFont(font) {
  this.appendArray.push(font) //判断头部有没有插入样式的数组
  const styles = `@font-face {
          font-family:'${font}';
            src: local('${font}'),
                url('/static/fonts/${font}.ttf');
        }`

  this.addCssByStyle(styles)
},

判断数组中有没有重复元素的函数(用正则):

javascript 复制代码
repeatornot(array) {
  return /(\x0f[^\x0f]+)\x0f[\s\S]*\1/.test('\x0f' + array.join('\x0f\x0f') + '\x0f')
}

增加到头部样式中的函数:

javascript 复制代码
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) }
  }
},

核心代码就在上面,另外附上判断用户电脑里面是否安装了某个字体的函数库:

javascript 复制代码
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("")};

语法:

scss 复制代码
isSupportFontFamily(fontFamily);

小结

以上就是我总结的实现网页中添加特殊字体的集中方案,假如你有更好的方案,欢迎留言给我!

相关推荐
张保瑞1 分钟前
十一:java web(3)-- Spring框架 -- Spring简介
java·前端·spring
墨柳烟24 分钟前
ABAQUS高亮显示网格节点方法:Python为每个节点建立集合
开发语言·前端·python·abaqus
琴~~1 小时前
前端根据后端返回的文本流逐个展示文本内容
前端·javascript·vue
zhaocarbon1 小时前
el-scrollbar 动态更新内容 鼠标滚轮无效
前端·javascript·vue.js
一纸忘忧1 小时前
Nuxt 3.14 发布!全新功能与性能提升
前端·javascript·vue.js
少年姜太公1 小时前
【ES6】让你彻底搞懂const ,let和var的区别
javascript
~甲壳虫2 小时前
react中得类组件和函数组件有啥区别,怎么理解这两个函数
前端·react.js·前端框架
.net开发2 小时前
WPF使用Prism框架首页界面
前端·c#·.net·wpf
名字越长技术越强2 小时前
vue--vueCLI
前端·javascript·vue.js
是个热心市民2 小时前
构建一个导航栏web
前端·javascript·python·django·html