web前端之CSS——web字体详解

发布时间：2023-09-23 17:00

前言

开发人员可以为自已的网页指定特殊的字体（将指定字体提前下载到站点中），无需考虑用户电脑上是否安装了此特殊字体。从此，把特殊字体处理成图片的方式便成为了过去。

支持程度比较好，甚至 IE 低版本的浏览器也能支持。

字体的常见格式

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

TureTpe格式：(.ttf)

.ttf 字体是Windows和Mac的最常见的字体，是一种RAW格式。

支持这种字体的浏览器有IE、Firefox、Chrome、Safari、Opera

OpenType格式：(.otf)

.otf 字体被认为是一种原始的字体格式，其内置在TureType的基础上。

支持这种字体的浏览器有IE、Firefox、Chrome、Safari、Opera

Web Open Font Format格式：(.woff)

woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离。

支持这种字体的浏览器有IE、Firefox、Chrome、Safari、Opera

Embedded Open Type格式：(.eot)

.eot字体是IE专用字体，可以从TrueType创建此格式字体，支持这种字体的浏览器有IE4+。

SVG格式：(.svg)

.svg字体是基于SVG字体渲染的一种格式。

支持这种字体的浏览器有IE、Firefox、Chrome、Safari、Opera

总结：

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

下载字体的网站推荐：

  • http://www.zhaozi.cn/

  • http://www.youziku.com/

WebFont 的使用步骤

打开网站http://iconfont.cn/webfont#!/webfont/index，如下：

web前端之CSS——web字体详解_第1张图片

上图中，比如我想要「思源黑体-粗」这个字体，那我就点击红框中的「本地下载」。

下载完成后是一个压缩包，压缩包链接：http://download.csdn.net/download/smyhvae/10253561

解压后如下：

web前端之CSS——web字体详解_第2张图片

上图中， 我们把箭头处的html文件打开，里面告诉了我们 webfont 的使用步骤：

web前端之CSS——web字体详解_第3张图片

（1）第一步：使用font-face声明字体

@font-face {font-family: 'webfont';
    src: url('webfont.eot'); /* IE9*/
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('webfont.woff') format('woff'), /* chrome、firefox */
    url('webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('webfont.svg#webfont') format('svg'); /* iOS 4.1- */
}

（2）第二步：定义使用webfont的样式

.web-font{
    font-family:"webfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}

（3）第三步：为文字加上对应的样式

<i class="web-font">这一分钟，你和我在一起，因为你，我会记得那一分钟。从现在开始，我们就是一分钟的朋友。这是事实，你改变不了，因为已经完成了。i>

举例：

我们按照上图中的步骤来，引入这个字体。完整版代码如下：


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>title>
    <style>

        p{
            font-size:30px;
        }

        /*  如果要在网页中使用web字体（用户电脑上没有这种字体）*/
        /* 第一步：声明字体*/
        /* 告诉浏览器 去哪找这个字体*/
        @font-face {font-family: 'my-web-font';
            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- */
        }
        /* 第二步：定义一个类名，谁加这类名，就会使用 webfont 字体*/
        .webfont{
            font-family: 'my-web-font';
        }
    style>
head>
<body>
    
    <p class="webfont">生命壹号，永不止步p>
body>
html>

代码解释：

（1）my-web-font这个名字是随便起的，只要保证第一步和第二步中的名字一样就行。

（2）因为我把字体文件单独放在了font文件夹中，所以在src中引用字体资源时，写的路径是 font/...

工程文件：

  • 2018-02-20-WebFont举例.zip

字体图标（阿里的 iconfont 网站举例）

我们其实可以把图片制作成字体。常见的做法是：把网页中一些小的图标，借助工具生成一个字体包，然后就可以像使用文字一样使用图标了。这样做的优点是：

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

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

  • 使用灵活，便于维护。

也就是说，我们可以把这些图标当作字体来看待，凡是字体拥有的属性（字体大小、颜色等），均适用于图标。

使用步骤如下：（和上一段的使用步骤是一样的）

打开网站http://iconfont.cn/，找到想要的图标，加入购物车。然后下载下来：

web前端之CSS——web字体详解_第4张图片

压缩包下载之后，解压，打开里面的demo.html，里面告诉了我们怎样引用这些图标。

web前端之CSS——web字体详解_第5张图片

举例1：（图标字体引用）


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>title>
    <style>
        /*申明字体*/
        @font-face {font-family: 'iconfont';
            src: url('font/iconfont.eot'); /* IE9*/
            src: url('font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
            url('font/iconfont.woff') format('woff'), /* chrome、firefox */
            url('font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
            url('font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
        }

        .iconfont{
            font-family: iconfont;
        }

        p{
            width: 200px;
            border: 1px solid #000;
            line-height: 60px;
            font-size:30px;
            margin:100px auto;
            text-align: center;
        }

        p span{
            color:red;
        }
    style>
head>
<body>
    
    <p><span class="iconfont">span>扫码付款p>
body>
html>

效果如下：

web前端之CSS——web字体详解_第6张图片

举例2：（伪元素的方式使用图标字体）

如果想要在文字的前面加图标字体，我们更习惯采用伪元素的方式进行添加。

代码如下：


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>title>
    <style>
        /*申明字体*/
        @font-face {font-family: 'iconfont';
            src: url('font/iconfont.eot'); /* IE9*/
            src: url('font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
            url('font/iconfont.woff') format('woff'), /* chrome、firefox */
            url('font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
            url('font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
        }



        p{
            width: 200px;
            border: 1px solid #000;
            line-height: 60px;
            font-size:30px;
            margin:100px auto;
            text-align: center;
            position: relative;
        }

        .icon::before{
            /**/
            content:"\e628";
            /*position: absolute;*/
            /*left:10px;*/
            /*top:0px;*/
            font-family: iconfont;
            color:red;
        }

        span{
            position: relative;

        }


    style>
head>
<body>
    <p class="icon">扫码付款p>
    <span class="icon" >我是spanspan>
    <div class="icon">divvvvvvvvvvvdiv>
body>
html>

效果如下：

web前端之CSS——web字体详解_第7张图片

工程文件：

  • 2018-02-20-图标字体demo.zip

其他相相关网站介绍

  • Font Awesome 使用介绍：http://fontawesome.dashgame.com/

定制自已的字体图标库：

  • http://iconfont.cn/

  • https://icomoon.io/

SVG素材：

  • http://www.iconsvg.com/

360浏览器网站案例

暂略。

这里涉及到：jQuery fullPage 全屏滚动插件。

  • 中文网址:http://www.dowebok.com

  • 相关说明:http://www.dowebok.com/77.html

使用 Bootstrap 网站的图标字体

打开如下网站：http://www.bootcss.com/p/font-awesome/。

web前端之CSS——web字体详解_第8张图片

如上图所示，下载字体后，进行解压：

web前端之CSS——web字体详解_第9张图片

使用步骤如下：

（1）如图只是想要字体的话，可以把css和font这两个文件夹拷贝到项目里。

（2）在html文档中的 标签里，引入 font-awesome.min.css 文件：

    <link rel="stylesheet" href="css/font-awesome.min.css">

（3）想在哪个标签里用这个图标，直接在这个标签里加className就行（className都在网站上列出来了）。

完整版代码如下：


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <style>

    style>
head>
<body>
    <span class="icon-play">播放span>
body>
html>

我的公众号

想学习代码之外的技能？不妨关注我的微信公众号：前端小泽

扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：

web前端之CSS——web字体详解_第10张图片

关注博主，更多文章精彩继续，一起学习前端

相关推荐

爆肝三个月，终于拿到了字节 Offer

二、Kafka核心架构原理

【微服务SpringCloud】：Ribbon 详解

Windows 80端口被占用的解决方法

算法学习之路：LRU和LFU的简单实现 V1

〖Python WEB 自动化测试实战篇⑮〗 实战 - 自动化测试的持续集成

CV算法评判标准：混淆矩阵、准确率、精确率、召回率、特异度、P-R曲线、AP、mAP、coco标准

C语言函数调用堆栈详情分析

jieba 同义词_jieba分词详解

包装类和日期类

Python clip与range函数保姆级使用教程

【sklearn朴素贝叶斯算法】高斯分布/多项式/伯努利贝叶斯算法以及代码实例

mysql拆分字符串做条件查询

技术管理进阶——什么是影响力

python读取并可视化npy格式的深度图文件以及将其保存为jpg图片的方法

MySQL的InnoDB存储引擎对MVCC的实现

pytest官方文档解读fixtures的调用方式

Linux ARM平台开发系列讲解（摄像头V4L2子系统） 2.12.6 OV13850 v4l2_subdev注册匹配、摄像头出图测试和工具介绍

Spring【三】核心API学习

Numpy 数组的其他函数--索引argwhere、去重unique、排序sort

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网，如有侵权请联系：561261067@qq.com

桂ICP备16001015号