体验 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进行调整 ...
随机推荐
- JSON的BUG
问题描述: method_cfg["input_method"][0].asString() 报错误: test1.cpp:40:46: error: ambiguous over ...
- 20、手把手教你Extjs5(二十)模块Grid的多列表方案
对于有很多字段的模块在一个grid中显示所有的字段,会显得很臃肿,对于不同的用户其侧重的字段类型也不尽相同,因此就有必要为Grid的列表设计多个方案.在这个自定义系统进行设计的时候,我已经将这部分内容 ...
- 利用反射动态从程序集dll执行方法和属性
程序结构: //获取程序集 Assembly asb = Assembly.LoadFrom(path);//path为程序集的物理路径 //获取程序集下面的Student类 Type documen ...
- ARM交叉编译工具链分类说明
转载整理自:http://www.veryarm.com/cross-tools 从授权上,ARM交叉编译工具链分为免费授权版和付费授权版. 免费版目前有三大主流工具商提供,第一是GNU(提供源码,自 ...
- .NET防止重复提交数据
最近在做一个销售系统的时候,操作人员提交数据的时候数据库竟然会出现多条数据相同的记录,并且是在1秒之内,客户反馈给我们,第一反应是重复提交的问题,检查了下代码,程序执行完成后应该是跳转到别的页面的,可 ...
- 代码中动态改变布局属性RelativeLayout.LayoutParams.addRule()
我们知道,在 RelativeLayout 布局中有很多特殊的属性,通常在载入布局之前,在相关的xml文件中进行静态设置即可. 但是,在有些情况下,我们需要动态设置布局的属性,在不同的条件下设置不同的 ...
- 基于RBAC的权限设计模型
个部件模型组成,这4个部件模型分别是基本模型RBAC0(Core RBAC).角色分级模型RBAC1(Hierarchal RBAC).角色限制模型RBAC2(Constraint RBAC)和统一模 ...
- C++中vector 容器的基本操作
vector是一种简单高效的容器,具有自动内存管理功能.对于大小为n的vector容器,它的元素下标是0~n-1. vector有二个重要方法: begin(): 返回首元素位置的迭代器. ...
- 负载均衡探测器lbd
负载均衡探测器lbd 大型网站为了解决海量访问问题,往往采用负载均衡技术,将用户的访问分配到不同的服务器上.网站的负载均衡可以从DNS和HTTP两个环节进行实施.在进行Web渗透测试的时候,需要先 ...
- [转载]rabbitmq可靠发送的自动重试机制
转载地址http://www.jianshu.com/p/6579e48d18ae http://www.jianshu.com/p/4112d78a8753 接这篇 在上文中,主要实现了可靠模式的c ...