web网页引入自定义字体设置
来源:互联网 发布:锐捷网络校招 编辑:程序博客网 时间:2024/06/06 07:39
新项目中 设计用了一个自定义的字体,由于不熟悉,折腾了好大一圈,最终在同事的帮助下,顺利解决,记录一下,供有同样疑虑的小伙伴参考。
1、首先需要下载你需要的字体,此项目中用到的字体是思源黑体(light),需要字体文件的格式是.ttf,思源的ttf版字体不好找,我是下载的otf版,又用fontCreate 软件转换了一下,算是得到了ttf字体(废了老大劲,才转换成,网上贴出来的在线转换文字格式的网站试了,不太靠谱)。
2、需要把字体文件放到你的项目文件font中。
3、css中引入字体文件
@font-face { font-family: font_light; src: url('../lib/font/font-light/SourceHanSansCN-Light.eot'); src: url('../lib/font/font-light/SourceHanSansCN-Light.eot?#iefix') format('embedded-opentype'), url("../lib/font/font-light/SourceHanSansCN-Light.ttf") format("truetype"), url("../lib/font/font-light/SourceHanSansCN-Light.woff") format("woff"), url("../lib/font/font-light/SourceHanSansCN-Light.svg") format("svg"); font-weight: normal;}
按这种格式引入,除了.ttf格式的文件,别的文件会显示找不到该文件,先不要着急(这个后面用font-spider 打包的时候会把那几个格式的文件创建出来),如果是为了初期开发调试效果,可以先把除了.ttf格式的引入注释掉。
4、字体文件太大了,需要用到font-spider 对字体文件压缩。(这个网上都有教程,先要安装node 然后安装font-spider 然后执行打包程序)
font-spider 安装:npm install font-spider -g
打包:font-spider /Applications/XAMPP/xamppfiles/htdocs/1lumi/cn/home/index.html
这一步就打包完成了,font 文件就会出现下面几个文件格式。.font-spider 文件夹是原来对字体文件,可以删除,也可以留着继续用,看一下现在对字体文件是不是小了很多
记录如上!
阅读全文
0 0
- web网页引入自定义字体设置
- 自定义字体的引入;
- Android 自定义字体(引入外部字体)
- 自定义web字体-通过@font-face在网页中嵌入自定义字体
- textview设置字体以及引入新字体
- 【ttf压缩】网页开发中引入字体文件过大,加载缓慢的解决办法【字蛛】【web Font】
- 自定义网页字体
- 网页使用自定义字体
- 网页字体设置
- 网页字体设置
- 网页中引入字体@font-face 笔记
- 让你的网页引入思源字体
- html5字体属性与自定义字体(字体包的引入)
- iOS 设置字体 自定义字体
- iOS 设置字体 自定义字体
- iOS 设置字体 自定义字体
- Web Font 自定义字体
- css 设置自定义字体
- 网盘搜索工具整理2017
- linux新环境下无法启动tomcat
- sublime 搭建nodejs环境
- Java Web中的Action、Dao、Service、Model学习笔记
- opencv 分类器训练 Assertion failed (elements_read == 1) in icvGetHaarTraininDataFrom
- web网页引入自定义字体设置
- redis数据丢失及解决
- WKWebView的两个坑点
- 15.Python
- 三星S5P4418开发板 (ARM Cortex-A9架构)
- Spring 配置DataSource 三种方式
- SpringBoot学习(二)--集成mybatis+freemark
- 内网穿透二
- 解决 perl: warning: Setting locale failed.