网页引入特殊字体的几种方案
来源:互联网 发布:南京java招聘 编辑:程序博客网 时间:2024/06/06 03:58
网页使用的字体需要受制于操作系统,如果用户的操作系统没有安装某个字体,网页则会退而求其次的使用系统自带的字体。
因此我们并不能随便使用一些好看的字体,只能选用一些安全字体。比如: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字体文件,重新上传一遍。
工具地址:http://everyfont.enjoyfe.com
- 网页引入特殊字体的几种方案
- 网页引入特殊字体的几种方案
- 网页引入特殊字体的几种方案
- 在网页中使用特殊字体的几种方式
- 网页特殊字体处理方案
- css引入特殊字体
- 使用 Cufon 渲染网页字体(转载自ibm developerwork,在网页里引入特殊字体的方法,通过js实现字体渲染)(1)
- 网页显示的几种常用字体
- 让你的网页引入思源字体
- 网页中引入样式表的几种方法
- 网页公共部分引入的几种方法简述
- html网页的特殊字体属性
- Android引入外部自定义特殊字体的方法
- Android引入外部自定义特殊字体的方法
- Android引入外部自定义特殊字体的方法
- Android引入外部自定义特殊字体的方法
- 网页上预览pdf文件的几种方案
- Android引入外部自定义特殊字体
- 强军征程
- SpringCloud(第 040 篇)链接Mysql数据库,通过CrudRepository编写数据库访问
- 批量删除或修改
- 啊,业务层是否也需要服务化?
- 码农修炼指南,助你掌控全场
- 网页引入特殊字体的几种方案
- SpringCloud(第 041 篇)链接Mysql数据库,通过JdbcTemplate编写数据库访问
- jquery实现上一页下一页插件
- 【Windows】Windows系统下等待线程退出的方法
- Iterator 的使用
- 驱动开发环境以及双机调试环境搭建
- 前端之必备网站
- SpringCloud(第 042 篇)链接Mysql数据库,通过JdbcTemplate编写数据库访问,而且支持事物处理机制
- CentOS编译安装Apache服务