WebFont-前端字体
2024-09-01 18:00:39
WebFont-前端字体
前端设计时使用了一些不常用的字体,如何在客户的浏览器中正确展示?
解决方案是使用webfont,将字体置于服务端,利用 css 中的font-family
进行设置,客户端展现时加载到浏览器中。
WebFont
webfont一般使用 4 种格式,即 eot / svg / ttf / woff
1 首先需要定义字体:
@font-face { font-family:'fzztjw'; src: url('../fonts/fzztjw-webfont.eot'); src: url('../fonts/fzztjw-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/fzztjw-webfont.woff') format('woff'), url('../fonts/fzztjw-webfont.ttf') format('truetype'), url('../fonts/fzztjw-webfont.svg#ekcososregular') format('svg'); font-weight: normal; font-style: normal; }
2 然后就可以在css中使用了(方正藏体简体):
font-family: 'fzztjw'
效果如下:
字体转换
我们通常获得的字体是ttf格式,如何获取到其他的格式?
利用在线转换网站进行转换就OK了,推荐 fontsquirrel.
- 上传 ttf 格式字体文件
设置
不同的设置生成的字体稍有差异,多试几次
下载字体
- 解压,拷贝到webapp下
css 可以拷贝stylesheet.css中的
来自为知笔记(Wiz)
最新文章
- zencart産品描述加上錨文本
- 20145224&;20145238《信息安全系统设计基础》实验五
- Windows-005-显示隐藏文件
- iOS - OC NSProcessInfo		系统进程信息
- MySQL Online DDL 工具之pt-online-schema-change
- poptest老李谈数据结构中深度优先和广度优先
- nc简单应用
- MSSQL 2000 错误823恢复
- 常用cmd代码片段及.net core打包脚本分享
- Django form表单
- anime.js 简单入门教程
- Alienware R8外星人台式机安装双系统(WIN10+Ubuntu)的总结
- 1.1.19 Word中表格自动断开
- Java中锁的实现与内存语义
- python3 bytes 和 string转换
- 20145214《网络攻防》逆向及Bof基础实践
- mysql 存储过程案列一个。
- Unused port adds a PWM/analog channel to a microcontroller
- Scikit-learn的kmeans聚类
- iOS沙盒文件目录
热门文章
- javascript中的回调函数
- zookeeper和Kafka集群安装配置
- Asp.Net使用org.in2bits.MyXls.dll操作excel的应用
- VS中的生成事件
- Terminal shortcuts
- eclipse 编码设置【转】
- Portability Flaw Locale Dependent Comparison
- .net常用正则表达式小结
- [QT_FFMPEG]学习问题: 刚开始移植ffmpeg,测试时出现 undefined reference to `avcodec_configuration()'
- scanf()与gets()的区别