网页引入特殊字体的几种方案
网页使用的字体需要受制于操作系统,如果用户的操作系统没有安装某个字体,网页则会退而求其次的使用系统自带的字体。
因此我们并不能随便使用一些好看的字体,只能选用一些安全字体。比如:Helvetica,Arial,宋体,微软雅黑,如果能在网页上使用好看的字体就好了~
可是引入字体对于英文来说,是合适的,因为字体文件本身不大。但是对于中文字体,一个字体文件就好几M,既耗费流量,又拖慢了加载速度,还会出现加载后字体突然变化的情况,尤其是对于移动端来讲,非常不划算。
做为一个有追求的前端,我也想做出一个有个性的网页啊,怎么能只用这一种字体呢?
于是,我们可以使用以下的方法,引入其他的字体。
1.谷歌字体源--英文字体
可以在https://fonts.google.com/网站上下选择字体,然后把提供的代码,引入网页中。
在网页中正常定义即可,如:font-family: 'Roboto', sans-serif;
还可以把字体文件下载下来,放在服务器上引用。
不过,这些字体不包括中文。纯英文的网站可以考虑使用。中文则不会按照设定的字体显示。
2.使用切图片的方式
最简单的方式,把文字切成图片,这是最快、最直接的方式,但是图片在放大或者缩小后会模糊,字体不清晰。
3.Every font在线中文字体压缩
直接将字体放在服务器上引用,但是一个中文字体要好几M,这样做并不合适。于是我做了一个在线压缩字体的工具--everyfont。
只需要上传html网页和字体的zip压缩包,工具便会将ttf中的字体精减,只剩下html页面中包含的字体。这样一个网页下来,字体文件就几K,一张图片也要好几十K呢,还是非常合适的。
上传的zip文件必须包括ttf格式的字体,而其他的字体以下面的例子写在html中,everyfont在线工具可以直接生成其他几种格式的文件。
body{
font-family: 'FZLTXHJW';
src: url('./FZLTXHJW.ttf') format('truetype'), url('./FZLTXHJW.svg') format('svg'),url('./FZLTXHJW.woff') format('woff');/*路径要正确*/
font-weight: normal;
font-style: normal;
}
这样我们的网页就可以使用任意的字体了,不用担心中文字体过大影响加载了,不过,如果后期修改文案,尽量要是网页中出现过的字,如果修改的文字有新的字 ,则还需要在用原来完整的ttf字体文件,重新上传一遍。
tips:还在测试中,请大家热情的提意见哦~
工具地址:http://everyfont.enjoyfe.com
注:本文原创,转载请注明出处。
有任何疑问,可以关注公众号并留言,会第一时间回复的~~
网页引入特殊字体的几种方案相关推荐
- html引入微软雅黑,网页引入特殊字体的几种方案
网页使用的字体需要受制于操作系统,如果用户的操作系统没有安装某个字体,网页则会退而求其次的使用系统自带的字体. 因此我们并不能随便使用一些好看的字体,只能选用一些安全字体.比如:Helvetica,A ...
- 网页引入谷歌字体_在网页中使用Google字体
网页引入谷歌字体 Google Fonts is a service provided for free by Google that allows access to thousands of fo ...
- 引入图标字体的三种方式
图标字体(iconfont) ------我们在网页中会发现一些小图标,可以通过图片引入图标,但是图片本身比较大,应用起来非常的不灵活.所以在这里给小伙伴们介绍一个叫"图标字体"的 ...
- 网页的横向打印的三种方案(print your page landscape)
关于网页打印,window.print()提供的功能离远离一般的需求,很多情况下需要编程扩展 目前网上有很多关于网页打印的,但大多采用了ActiveX控件或IE内置的一些Object,由于Active ...
- 网页引入svg图片的4种方式
web应用开发使用svg图片,总结了下,可以有如下4种方式: 1. 直接插入页面. 2. img标签引入. 3. css引入. 4. object标签引入. 1. 直接插入页面 在html页面,可以直 ...
- web网页引入自定义字体设置
新项目中 设计用了一个自定义的字体,由于不熟悉,折腾了好大一圈,最终在同事的帮助下,顺利解决,记录一下,供有同样疑虑的小伙伴参考. 1.首先需要下载你需要的字体,此项目中用到的字体是思源黑体(lig ...
- css:网页引入字体@font-face以及动态加载字体
css:网页引入网络字体@font-face <style >/* 引入字体 */@font-face {font-family: "站酷高端黑 Regular";fo ...
- @font-face引入自定义字体 兼容IE
废话说在前头 最近在给学校做网站,经理要求字体必须要兼容IE,有意思的是居然没人会搞这个引入外部字体兼容!在我最无望的时候甚至还发现了百度.淘宝都向万恶的IE字体屈服了. 但最后还是CSDN爸爸救了我 ...
- 字蛛(FontSpider,中文字体压缩器)网页自由引入中文字体
之前看过设计师面试一位 Web 前端工程师,其中有一段这样的对话: "如果设计师希望用图片实现某个字体样式,而从技术的角度来说这样不合理,但设计师非常坚持,这时候你怎么办?" &q ...
最新文章
- angular图片传到后台_告诉你,SpringBoot+Angular有多牛逼!
- 面试官一个线程池问题把我问懵逼了。
- nginx重点优化合集一
- git push代码到远程新分支
- 你有一笔新订单 语音_上市即成爆款 哪吒V首日订单突破1200辆_搜狐汽车
- 2018年4月计算机组成原理试题,全国2018年4月自考(02318)计算机组成原理试题及答案.pdf...
- from scipy.misc import imread 报错原因
- 极限理论总结04:Delta方法
- Linux目录结构和文件、目录常用命令
- python调用高德地图地理编码/逆地理编码
- 伦斯勒理工学院计算机科学专业强吗,伦斯勒理工大学CS专业好吗?
- 2个路由器串联做交换机共享网络的方法
- 三菱FX5U程序,双FX5U80MT主从站控制,普洛菲斯触摸屏程序,搭配三菱伺服,松下变频器控制运动控制数轴运动控制
- 用CSS 实现水波扩散的特效
- unity资源包导入错误 Failed to import package with error Couldnt decompress package
- 导入技能要素三大类_财务管理类专业(技能)课程体系
- SPSS李克特量表的变量属于顺序变量,为什么可以当作连续变量使用?【SPSS 060期】
- 高数叔 高数上期末复习(part2)
- 一键生成表白页面源码 v1.3
- 麦中凡教授的精彩观点