在最新项目中,由于要频繁使用艺术字,
而用户设备没有此字体,因此以往的经验都是使用图片...
所以在同事的瞩目期许之下,我开始实验研究这个问题的解决方案

1. 直接使用字体文件

@font-face {
font-family: 'xxxx';
src: url('../img/汉仪秀英体简.TTF');
}
.font {
font-family: 'xxxx', Arial, sans-serif;
}
该方案是能用的,因为使用的是微信不用考虑兼容性,
但是随着项目发布,还是出现了问题,由于字体文件过大(3.8M),于是艺术字部分出现了先没有再为雅黑再为艺术字的过程,视觉效果相当不妙,
其次,由于其文件过大的问题,一个项目使用多个字体那就很“刺激”了。

2. 引用第三方字体库
a. 字体生成
以“有字库”为例,它只需引用对应的 js,选定一个 dom,该 dom 内的文字就变成了艺术字。
使用时要把用在那个域名加入白名单,过段时间再研究其源码,还是非常好用的。
DEMO:https://foreverz133.github.io/demos/single/FontFamily.html
WEB:http://www.youziku.com/onlinefont/index
b. 线上字体
以“阿里WebFont”为例,引用线上字体文件,可以压缩该文件只包含部分文字,
用起来还不错,但问题在于只有 7 个字体,有待寻找其他字体库
WEB:http://www.iconfont.cn/webfont/#!/webfont/index

3. 自己压缩字体文件(只选择部分文字进行打包)
我们采用的是 java 版,得安一个 java sdk,初期效果还不错,大约两百字的大小是 236K
WEB:https://github.com/forJrking/FontZip (下载 FontZip.jar 那个)

// -----------------------------------------------------------
// --------------------------------------- 2017/05/31 更新
4. 字蛛
它依赖于 nodeJS,和 3 达到的效果是一样的,但个人觉得要方便很多,
先使用源字体玩耍,待发布时压缩一下,然后就不用管了,最多删掉新生成的一个文件夹
npm install font-spider -g // 安装

font-spider ./demo/*.html // 压缩
 
// -----------------------------------------------------------
// --------------------------------------- 2017/05/07 更新
 
后期有出现几次部分字体压缩后报错的情况,所以又重新研究了一番,
已遇到的主要报错有以下几种:
1. Failed to parse metrics in vhea
2. cmap: Failed to parse format 4 cmap subtable 0
3. invalid version tag
都是 OTS parsing error,一般直接调用文件是没问题的,但压缩后才开始报错,
有去查找些资料,但情况太过复杂,解决方案有改写 gulp 的,改写 IIS 的,实在不好总结。
所以最终只得和设计达成一致,使用什么字体先让前端试试能不能压缩,不能就换个字体,无奈呀...

体验 WebFont,网页上的艺术字的更多相关文章

  1. Windows Media Player安装了却不能播放网页上的视频

    前段时间遇到Windows Media Player安装了却不能播放网页上的视频的问题,在网上查找资料时,发现大部分资料都没能解决我这个问题.偶尔试了网上一牛人的方法,后来竟然解决了.现在再找那个网页 ...

  2. Mkdocs在html网页上看markdown

    目录 Mkdocs在html网页上看markdown 1. 本文目的 2. Mkdocs介绍 3. DEMO的演示 3.1 配置需求 3.2 安装mkdocs 3.3 新建工程 3.4 启动服务器 3 ...

  3. 使用FastReport.net 报表在网页上实现打印功能

    这些年的工作当中,最早是在8年前接触到FastReport这个报表工具,从名字上来看,直译过来就是快速报表,正所谓天下武功,唯快不破,FastReport报表早些年确实是制作报表的不二之选,8年前的工 ...

  4. 使用 font-spider 对 webfont 网页字体进行压缩

    原文链接:使用 font-spider 对 webfont 网页字体进行压缩 随着当前 Web 技术的日新月异,网页界面内容越来越丰富,让人眼花缭乱,其中就包括了网页中的各种自定义字体. 例如,个人博 ...

  5. “此网页上的某个 Web 部件或 Web 表单控件无法显示或导入。找不到该类型,或该类型未注册为安全类型。”

    自从vs装了Resharper,看见提示总是手贱的想去改掉它.于是乎手一抖,把一个 可视web部件的命名空间给改了. 喏,从LibrarySharePoint.WebPart.LibraryAddEd ...

  6. [moka同学收藏]网页上的“返回上一页”的几种实现代码

    我们在制作网页的时候,经常在网页上要用到"返回上一页"的功能.这一功能在制作网页的时候会有多种编码方法,在此,笔者将比较常用的几种编码写作方法在下面列出来,供各位技术人员参考使用. ...

  7. 使用chrome查看网页上效果的实现方式

    使用chrome查看网页上效果的实现方式 chrome是一个极为强大的工具,很多时候,我们不知道一个效果怎么实现的,我们完全可以找到响应的网页,然后找到其html文件,和js文件,查看源码,获得其实现 ...

  8. css015 定位网页上的元素

    css015 定位网页上的元素 一.   定位属性的功能 1.         四中类型的定位 Position: absolute relative fixed static a. 绝对定位 绝对定 ...

  9. CSS3-基于浮动的布局,响应式WEB设计,定位网页上的元素,设计打印页面的css技术

    基于浮动的布局: 1.除非图片设置了宽度,否则始终应该要对浮动的图片设置一个宽度,这样可以让浏览器给其他内容腾出环绕的空间 2.当侧边栏的高度与主内容区的高度不一致的时候,可以用个margin进行调整 ...

随机推荐

  1. JSON的BUG

    问题描述: method_cfg["input_method"][0].asString() 报错误: test1.cpp:40:46: error: ambiguous over ...

  2. 20、手把手教你Extjs5(二十)模块Grid的多列表方案

    对于有很多字段的模块在一个grid中显示所有的字段,会显得很臃肿,对于不同的用户其侧重的字段类型也不尽相同,因此就有必要为Grid的列表设计多个方案.在这个自定义系统进行设计的时候,我已经将这部分内容 ...

  3. 利用反射动态从程序集dll执行方法和属性

    程序结构: //获取程序集 Assembly asb = Assembly.LoadFrom(path);//path为程序集的物理路径 //获取程序集下面的Student类 Type documen ...

  4. ARM交叉编译工具链分类说明

    转载整理自:http://www.veryarm.com/cross-tools 从授权上,ARM交叉编译工具链分为免费授权版和付费授权版. 免费版目前有三大主流工具商提供,第一是GNU(提供源码,自 ...

  5. .NET防止重复提交数据

    最近在做一个销售系统的时候,操作人员提交数据的时候数据库竟然会出现多条数据相同的记录,并且是在1秒之内,客户反馈给我们,第一反应是重复提交的问题,检查了下代码,程序执行完成后应该是跳转到别的页面的,可 ...

  6. 代码中动态改变布局属性RelativeLayout.LayoutParams.addRule()

    我们知道,在 RelativeLayout 布局中有很多特殊的属性,通常在载入布局之前,在相关的xml文件中进行静态设置即可. 但是,在有些情况下,我们需要动态设置布局的属性,在不同的条件下设置不同的 ...

  7. 基于RBAC的权限设计模型

    个部件模型组成,这4个部件模型分别是基本模型RBAC0(Core RBAC).角色分级模型RBAC1(Hierarchal RBAC).角色限制模型RBAC2(Constraint RBAC)和统一模 ...

  8. C++中vector 容器的基本操作

    vector是一种简单高效的容器,具有自动内存管理功能.对于大小为n的vector容器,它的元素下标是0~n-1. vector有二个重要方法:     begin(): 返回首元素位置的迭代器.   ...

  9. 负载均衡探测器lbd

    负载均衡探测器lbd   大型网站为了解决海量访问问题,往往采用负载均衡技术,将用户的访问分配到不同的服务器上.网站的负载均衡可以从DNS和HTTP两个环节进行实施.在进行Web渗透测试的时候,需要先 ...

  10. [转载]rabbitmq可靠发送的自动重试机制

    转载地址http://www.jianshu.com/p/6579e48d18ae http://www.jianshu.com/p/4112d78a8753 接这篇 在上文中,主要实现了可靠模式的c ...