CSS3 自定义字体的常识与使用

最新推荐文章于 2024-04-21 12:18:11 发布

卡尔特斯

最新推荐文章于 2024-04-21 12:18:11 发布

阅读量236

点赞数

分类专栏： Html 文章标签： css html iconfont 第三方字体

本文链接：https://blog.csdn.net/zz00008888/article/details/112789829

版权

Html 专栏收录该内容

51 篇文章 7 订阅

订阅专栏

web字体

开发人员可以为自己的网页指定特殊的字体，无需考虑用户电脑上是否安装了此特殊字体，从此把特殊字体处理成图片的时代便成为了过去。

支持程度比较好，甚至IE低版本浏览器也能支持。不同浏览器所支持的字体格式是不一样的，所以有必要去了解一下有关字体格式的知识。

1、TureTpe(.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+；

了解了上面的知识后，我们就需要为不同的浏览器准备不同格式的字体，通常我们会通过字体生成工具帮我们生成各种格式的字体，因此无需过于在意字体格式间的区别差异。 
下载字体的网站.

推荐http://www.zhaozi.cn/、http://www.youziku.com/ 查找更多中文字体

web 字体使用：

生成字体：https://www.iconfont.cn/webfont#!/webfont/index 下载字体之后有使用流程

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    p {
      font-family: 'webfont';
      font-size: 30px;
    }
    /* 如果在网页中使用web字体（用户电脑上没有这种字体）*/
    /* 声明字体 */
    @font-face {
      font-family: 'webfont';
      src: url('font/webfont.eot'); /* IE9*/
      src: url('font/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('font/webfont.woff') format('woff'), /* chrome、firefox */
      url('font/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
      url('font/webfont.svg#webfont') format('svg'); /* iOS 4.1- */
    }
  </style>
</head>
<body>
  <p>苍茫的天涯我的爱...</p>
</body>
</html>

字体图标

其实我们可以把文字理解成是一种特殊形状的图片，反之我们是不是也可以把图片制作成字体呢？答案是肯定的。

常见的是把网页常用的一些小的图标，借助工具帮我们生成一个字体包，然后就可以像使用文字一样使用图标了。

优点：

1、将所有图标打包成字体库，减少请求；

2、具有矢量性，可保证清晰度；

3、使用灵活，便于维护；
Font Awesome 使用介绍：

http://fontawesome.dashgame.com/
定制自已的字体图标库

http://iconfont.cn/

https://icomoon.io/
SVG素材

http://www.iconsvg.com/

图标字体使用跟字体差不多推荐去 https://www.iconfont.cn 上找。

卡尔特斯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS3 自定义字体的常识与使用

web字体开发人员可以为自己的网页指定特殊的字体，无需考虑用户电脑上是否安装了此特殊字体，从此把特殊字体处理成图片的时代便成为了过去。支持程度比较好，甚至IE低版本浏览器也能支持。不同浏览器所支持的字体格式是不一样的，所以有必要去了解一下有关字体格式的知识。1、TureTpe(.ttf)格式 .ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、S..
复制链接

扫一扫