体验 WebFont,网页上的艺术字
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 那个)
npm install font-spider -g // 安装 font-spider ./demo/*.html // 压缩
1. Failed to parse metrics in vhea
2. cmap: Failed to parse format 4 cmap subtable 0
3. invalid version tag
有去查找些资料,但情况太过复杂,解决方案有改写 gulp 的,改写 IIS 的,实在不好总结。
所以最终只得和设计达成一致,使用什么字体先让前端试试能不能压缩,不能就换个字体,无奈呀...
体验 WebFont,网页上的艺术字的更多相关文章
- Windows Media Player安装了却不能播放网页上的视频
前段时间遇到Windows Media Player安装了却不能播放网页上的视频的问题,在网上查找资料时,发现大部分资料都没能解决我这个问题.偶尔试了网上一牛人的方法,后来竟然解决了.现在再找那个网页 ...
- Mkdocs在html网页上看markdown
目录 Mkdocs在html网页上看markdown 1. 本文目的 2. Mkdocs介绍 3. DEMO的演示 3.1 配置需求 3.2 安装mkdocs 3.3 新建工程 3.4 启动服务器 3 ...
- 使用FastReport.net 报表在网页上实现打印功能
这些年的工作当中,最早是在8年前接触到FastReport这个报表工具,从名字上来看,直译过来就是快速报表,正所谓天下武功,唯快不破,FastReport报表早些年确实是制作报表的不二之选,8年前的工 ...
- 使用 font-spider 对 webfont 网页字体进行压缩
原文链接:使用 font-spider 对 webfont 网页字体进行压缩 随着当前 Web 技术的日新月异,网页界面内容越来越丰富,让人眼花缭乱,其中就包括了网页中的各种自定义字体. 例如,个人博 ...
- “此网页上的某个 Web 部件或 Web 表单控件无法显示或导入。找不到该类型,或该类型未注册为安全类型。”
自从vs装了Resharper,看见提示总是手贱的想去改掉它.于是乎手一抖,把一个 可视web部件的命名空间给改了. 喏,从LibrarySharePoint.WebPart.LibraryAddEd ...
- [moka同学收藏]网页上的“返回上一页”的几种实现代码
我们在制作网页的时候,经常在网页上要用到"返回上一页"的功能.这一功能在制作网页的时候会有多种编码方法,在此,笔者将比较常用的几种编码写作方法在下面列出来,供各位技术人员参考使用. ...
- 使用chrome查看网页上效果的实现方式
使用chrome查看网页上效果的实现方式 chrome是一个极为强大的工具,很多时候,我们不知道一个效果怎么实现的,我们完全可以找到响应的网页,然后找到其html文件,和js文件,查看源码,获得其实现 ...
- css015 定位网页上的元素
css015 定位网页上的元素 一. 定位属性的功能 1. 四中类型的定位 Position: absolute relative fixed static a. 绝对定位 绝对定 ...
- CSS3-基于浮动的布局,响应式WEB设计,定位网页上的元素,设计打印页面的css技术
基于浮动的布局: 1.除非图片设置了宽度,否则始终应该要对浮动的图片设置一个宽度,这样可以让浏览器给其他内容腾出环绕的空间 2.当侧边栏的高度与主内容区的高度不一致的时候,可以用个margin进行调整 ...
随机推荐
- JS实现静态html页面左侧导航,右侧连接页面
本人前端小菜,想实现左侧导航固定,右侧链接页面,不想用iframe,请问各位有什么好的建议,最好有个demo,谢谢
- 原来在ARC下还有这么多不同?!
1.ARC空声明变量 使用ARC的另一个优势是所有未初始化的变量默认都是"空值化"的.这意味着像下面这样的声明使用ARC编译后指向的是空值(nil): NSObject myObj ...
- laravel无法显示路由界面
安装完laravel项目后,开启了重写,/app/storage也设置好了权限,但是始终无法显示出页面,并出现: "Whoops, looks like something went wro ...
- matlab find函数
find函数用来获取向量或矩阵中非0元素的索引 假设X是行向量,则find(X)返回的是一个行向量:X'为列向量,find(X')返回的是一个列向量. 看一个例子:A是一个行向量,B是一个列向量,将B ...
- WINDOWS下搭建SVN服务器端的步骤分享(Subversion)
1.获取svn程序 2.安装 Subversion(以下简称SVN)的服务器端和客户端.下载下来的服务器端是个 zip压缩包,直接解压缩即可,比如我解压到 E:\subversion .客户端安装文件 ...
- IOS开发之按钮控件Button详解
reference:http://mxcvns.lofter.com/post/1d23b1a3_685d59d 首先是继承问题,UIButton继承于UIControl,而UIControl继承于U ...
- onethink权限管理 RBAC
查看了官网的视频,写的不错. 大致熟悉了流程.这里打算自己动手写一个权限的控制
- 思迅/泰格/科脉/收银软件/商超软件数据库修复解决断电造成损坏的mdb\dat文件SQL数据库 置疑 修复 恢复
拥有专业管理软件数据库修复技术工程师,专业提供管家婆.美萍.思迅.科脉等管理软件技术服务,电脑维修\重装系统技 术服务.无法登陆打不开等出错问题处理(连接失败,请输入正确的服务器名,SQL Serve ...
- 家用计费系统ER图
家用计费系统研发开始.在此记录自己的开发过程.
- Javascript正则表达式完全学习手册
正则表达式看起来很吓人,不容易让人亲近,但它的确很好用,可以很大程度上提高你的开发效率.本文从零开始介绍了应如何学习正则表达式.文中范例主要为JavaScript. 正则表达式可以很恐怖,真得很恐怖. ...