web字体

番茄西红柿发布于2019-04-22 19:50 / 1181人阅读

摘要：字体格式不同浏览器所支持的字体格式是不一样的，我们有必要了解一下有关字体格式的知识。推荐网站字库成立于年，推出的第一个自定义图标字体生成器，它允许用户选择他们所需要的图标，使它们成一字型。这个字体图标可以在下免费使用。

1.字体格式

不同浏览器所支持的字体格式是不一样的，我们有必要了解一下有关字体格式的知识。

1、TureType(.ttf)格式

.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+ iOS Mobile、Safari4.2+; 2、OpenType(.otf)格式　　.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+.Opera10.0+、iOS Mobile、Safari4.2+; 3、Web Open Font Format(.woff)格式　　 woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离，支持这种字体的浏览器有IE9+. Firefox3.5+、Chrome6+、Safari3.6+Opera11.1+; 4、Embedded Open Type(.eot)格式　　 .eot字体是IE专用字体，可以从TrueType创建此格式字体，支持这种字体的浏览器有IE4+; 5、SVG(.svg)格式　.svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+; 了解了上面的知识后，我们就需要为不同的浏览器准备不同格式的字体，通常我们会通过字体生成工具帮我们生成各种格式的字体，因此无需过于在意字体格式间的区别差异。

2.字体图标

图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的"http请求"，这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”，因为图片放大和缩小会失真。移动端响应式，很多情况下希望我们的图标是可以缩放的。此时一个非常重要的技术出现了，额不是出现了，是以前就有，是被从新"宠幸"啦。这就是字体图标(iconfont). 　　字体图标优点　　　　可以做出跟图片一样可以做的事情,改变透明度、旋转度，等..但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等等.. . 　　本身体积更小，但携带的信息并没有削减。　　几乎支持所有的浏览器　　移动端设备必备良药...

3.字体图标使用流程

1.设计字体图标假如图标是我们公司多带带设计，那就需要第一步了，这个属于UI设计人员的工作，他们在 illustrator 或 Sketch 这类矢量图形软件里创建 icon图标，比如下图：之后保存为svg格式，然后给我们前端人员就好了。其实第一步，我们不需要关心，只需要给我们这些图标就可以了，如果图标是大众的，网上本来就有的，可以直接跳过第一步，进入第三步。 2.上传生成字体包　　当UI设计人员给我们svg文件的时候，我们需要转换成我们页面能使用的字体文件，而且需要生成的是兼容性的适合各个浏览器的。　　推荐网站： http://icomoon.io **icomoon字库** IcoMoon成立于2011年，推出的第一个自定义图标字体生成器，它允许用户选择他们所需要的图标，使它们成一字型。内容种类繁多，非常全面,唯一的遗憾是国外服务器，打开网速较慢。 **阿里icon font字库** http://www.iconfont.cn/ 这个是阿里M2UX的一个icon font字体图标字库，包含了淘宝图标库和阿里图标库。可以使用AI制作图标上传生成。一个字，免费，免费!! **fontello** [http://fontello.com/](http://fontello.com/) 在线定制你自己的icon font字体图标字库，也可以直接从GitHub下载整个图标集，该项目也是开源的。 **Font-Awesome** [http://fortawesome.github.io/Font-Awesome/](http://fortawesome.github.io/Font-Awesome/) 这是我最喜欢的字库之一了，更新比较快。目前已经有369个图标了。 **Glyphicon Halflings** [http://glyphicons.com/](http://glyphicons.com/) 这个字体图标可以在Bootstrap下免费使用。自带了200多个图标。 **Icons8** [https://icons8.com/](https://icons8.com/) 提供PNG免费下载，像素大能到500PX

GPU云服务器云服务器免费字体添加字体系统字体小字体

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/966.html

Web-Fontmin -- 在线提取你需要的字体

摘要：在上面的代码片段可以看出，要兼容性好的使用，我们同时需要格式的字体。不单止可以转换格式同时支持中文，还可以提取字体，并且有更快的上传和转换速度。拥有的所有功能，并且在线即可用。关于@font-face @font-face是CSS3中的一个模块，使用 @font-face 可以自定义网页字体，即使用户的电脑没有安装某种字体。怎么用 @font-face 呢？你可能见过类似下面的代码片...

ephererid 2019-08-19 17:51 评论0 收藏1
Web-Fontmin -- 在线提取你需要的字体

摘要：在上面的代码片段可以看出，要兼容性好的使用，我们同时需要格式的字体。不单止可以转换格式同时支持中文，还可以提取字体，并且有更快的上传和转换速度。拥有的所有功能，并且在线即可用。关于@font-face @font-face是CSS3中的一个模块，使用 @font-face 可以自定义网页字体，即使用户的电脑没有安装某种字体。怎么用 @font-face 呢？你可能见过类似下面的代码片...

derek_334892 2019-08-30 12:52 评论0 收藏0
Web字体的初探

摘要：字体的初探一，字体基本概念的介绍字体的分类衬线体衬线在印刷的文字中衬线字体对于人眼的辨识更轻松，阅读更舒服横细竖粗，开始和结束的地方有装饰。无论是还是下，不指定网页的中文字体时，默认的就是宋体。 Web字体的初探一，字体基本概念的介绍 1.1 字体的分类 1.1.1 Serif（衬线体） Serif（衬线）：在印刷的文字中衬线字体对于人眼的辨识更轻松，阅读更舒服横细竖粗，开始和结束...

luckyyulin 2019-08-01 14:53 评论0 收藏0
HTML与CSS中的文本个人分享

摘要：文本标题元素注意在一个页面中最好只使用一个标题因为浏览器只会抓取一个多了没用示例代码标题元素元素默认效果是显示最大显示最小默认效果是由浏览器自带样式提供可以通过进行修改每个标题元素是独占一行并且是垂直排列在实际开发中常用的标题元素最文本标题元素注意: 在一个HTML页面中最好只使用一个标题因为浏览器只会抓取一个多了没用示例代码: 一花一世界一叶一孤城娃哈哈爽歪歪...

MartinHan 2019-08-29 16:32 评论0 收藏0
HTML与CSS中的文本个人分享

摘要：文本标题元素注意在一个页面中最好只使用一个标题因为浏览器只会抓取一个多了没用示例代码标题元素元素默认效果是显示最大显示最小默认效果是由浏览器自带样式提供可以通过进行修改每个标题元素是独占一行并且是垂直排列在实际开发中常用的标题元素最文本标题元素注意: 在一个HTML页面中最好只使用一个标题因为浏览器只会抓取一个多了没用示例代码: 一花一世界一叶一孤城娃哈哈爽歪歪...

iliyaku 2019-08-02 11:21 评论0 收藏0