WebFont-前端字体
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)
WebFont-前端字体的更多相关文章
- 使用 font-spider 对 webfont 网页字体进行压缩
原文链接:使用 font-spider 对 webfont 网页字体进行压缩 随着当前 Web 技术的日新月异,网页界面内容越来越丰富,让人眼花缭乱,其中就包括了网页中的各种自定义字体. 例如,个人博 ...
- webfont自定义字体的实现方案
对于做Web前端的人来说,现在不知道webfont为何物似乎显得有点low了.webfont固然可爱,但似乎仍只可远观,不可亵玩.原因就在于中文字体库体积庞大,远比26个字母来的复杂.于是有同学就说了 ...
- font-spider利器对webfont网页字体压缩使用
http://font-spider.org/ npm install font-spider -g hyheilizhitij(汉仪黑荔枝体简) //引入 @font-face{ font-fami ...
- 前端,字体图标,盒子显隐,2d形变,盒子阴影
---恢复内容开始--- 字体图标 1.将font-awesome-4.7.0文件夹放入项目内 2.在html head中连接 3.在body中导入 盒子显隐 1.使用高度显隐 <p>-- ...
- Web引用中文个性字体
最近在前端开发时,因为设计的原因,要引用一些特殊字体(otf格式),但是后来发现这些字体文件非常大,平均每个要8mb左右,严重影响了网页效率.经过一番搜索,发现了前端字体压缩工具(只支持utf-8格式 ...
- CSS Web Fonts 网络字体
Fonts 1. CSS font-family 在 CSS 中,可以使用 font-family 属性来指定字体,浏览器渲染文字时候会根据这个属性应用于元素.如果没有指定这个属性或者指定的字体不存在 ...
- 移动混合开发之android文件管理-->flexbox,webFont。
增加操作栏,使用felxbox居中,felx相关参考网址:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 使用webFont添加图标, ...
- WEB字体,多列布局和伸缩盒
WEB字体 语法 @font-face{ font-family:""; src:url() format() ... } 兼容性写法 @font-face { font-fami ...
- 中文WebFont探索
本文主要讲中文webFont的相关知识,包含了业界现状.WebFont优势.实现方案等. 一 业界使用WebFont现状 1.1 英文WebFont使用现状 英文版已使用非常广泛.比较有名的字体库:G ...
- Webfont 的兼容性问题[持续更新]
低版安卓手机的 webview 显示不了,另外黑莓手机显示出来是这样: 生成工具: 离线字体生成工具:webfont 在线字体生成平台:icomoon.io, iconfont.cn均有问题 其他一些 ...
随机推荐
- STM32知识点纪要
1.GPIO BSRR(端口位设置寄存器)是赋1相应IO拉高,赋0无影响 BRR(端口位清除寄存器)是是赋1相应IO拉低,赋0无影响 2.UART 连线TX—TX,RX—RX 3.JTAG和SWD接口 ...
- Hibernate入门2.简单的项目开发实例
Hibernate入门2.简单的项目开发实例 这一节通过一个简单的项目学习Hibernate项目的配置 代码下载 : 链接: http://pan.baidu.com/s/1zlgjl 密码: p34 ...
- epoll 模型
body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...
- jQuery的无new创建方法
一般我们去写一个框架,会采用什么样的设计呢?比如设计一个jQuery框架,一般我们会创建一个函数对象 function jQuery(params){ //构造函数 }jQuery.prototype ...
- idea如何热部署(转)
IntelliJ IDEA 怎么热部署,每次修改java文件就得重启tomcat 原文链接:http://blog.csdn.net/dandandeshangni/article/details/ ...
- [置顶]
HashTable vs HashMap
转载请注明出处:http://blog.csdn.net/crazy1235/article/details/76686891 HashTable vs HashMap 构造函数 hash函数 syn ...
- zend 2.2 db select 使用例子
<?php use Zend\Db\Sql\Select; // basic table $select0 = new Select; $select0->from('foo'); // ...
- nginx: [emerg] "fastcgi_pass" directive is duplicate in /etc/nginx/sites-enabled/default:57
/************************************************************************************************ * ...
- 在win10下安装双系统ubuntu16.04.3教程
闲暇了两天,终于想起来要装一个Liunx系统了.于是捣鼓了一番,实现了在Win10下安装Ubuntu16.04.3版本. 一.准备工作 下载Ubuntu 16.04.3镜像 准备一个2G以上的U盘 下 ...
- Scss开发临时学习过程||webpack、npm、gulp配置
SCSS语法: 假设变量申明带有!default,那么如果在此申明之前没有这个变量的申明,则用这个值,反之如果之前有申明,则用申明的值. ‘...’传递多个参数: @mixin box-shadow( ...