CSS3-字体

1. 字体相关的样式


我们前面讲过字体的两个属性

color用来设置字体颜色

font-size字体的大小

em 相当于当前元素的一个font-size
rem 相对于根元素的一个font-size
当然,字体的属性并不止这些

2. font-family


font-family 字体族(字体的格式)

serif 衬线字体

sans-serif 非衬线字体 

monospace 等宽字体

cursive 手写体

上述字体均不表示具体的某种字体,而是字体的分类

我们经常使用的一些字体,如微软雅黑、黑体、楷体、宋体、Consolas等,才是具体的某种字体

也就是说,font-family 指定字体的类别,浏览器会自动使用该类别下的字体

font-family可以同时指定多个字体,多个字体间使用,隔开

字体生效时优先使用第一个,第一个无法使用则使用第二个,以此类推

font-family: 'Courier New', Courier, monospace

3. @font-face

我们除了可以使用系统自带的字体样式外,还可以在服务器端自定义字体位置

@font-face可以将服务器中的字体直接提供给用户去使用

@font-face {
    /* 指定字体名字 */
    font-family: 'myFont1';
    /* 服务器中字体路径 */
    src: url('/font/ZCOOLKuaiLe-Regular.woff'),
        url('/font/ZCOOLKuaiLe-Regular.otf'),
        url('/font/ZCOOLKuaiLe-Regular.ttf') format('truetype');/* 指定字体格式,一般不写 */
}

p {
    font-size: 30px;
    color: salmon;
    font-family: myFont1;
}

问题

  1. 加载速度:受网络速度影响,可能会出现字体闪烁一下变成最终的字体
  2. 版权:有些字体是商用收费的,需要注意
  3. 字体格式:字体格式也有很多种(woff、otf、ttf),未必兼容,可能需要指定多个

5. 图标字体(iconfont)


图标字体简介
在网页中经常需要使用一些图标,可以通过图片来引入图标但是图片大小本身比较大,并且非常的不灵活

所以在使用图标时,我们还可以将图标直接设置为字体,然后通过@font-face的形式来对字体进行引入

这样我们就可以通过使用字体的形式来使用图标

fontawesome
官方网站:https://fontawesome.com/

下载解压完毕之后,直接将css和webfonts移动到项目中即可使用

<link rel="stylesheet" href="/font/fontawesome/css/all.css">
<style>
    i {
        color: green;
    }

    .fa-venus-mars,
    .fa-mars-double {
        color: red;
    }

    .fa-html5 {
        color: #E34D22;
    }

    .fa-css3 {
        color: blue;
    }

    .fa-js {
        color: #D1B514;
    }
</style>

<!-- 大小 -->
<i class="fab fa-weixin fa-lg"></i>
<i class="fab fa-weixin fa-2x"></i>
<i class="fab fa-weixin fa-3x"></i>
<br>

<!-- 边框 -->
<i class="fab fa-weixin fa-2x fa-border"></i>
<br>

<!-- 旋转  -->
<i class="fab fa-weixin fa-2x  fa-rotate-90 "></i>
<!-- 水平对称 -->
<i class="fab fa-weixin fa-2x fa-flip-horizontal "></i>
<!-- 垂直对称 -->
<i class="fab fa-weixin fa-2x fa-flip-vertical "></i>
<br>

<!-- 动画 fa-spin 使任意图标旋转 fa-pulse 使其进行8方位旋转 -->
<i class="fa fa-venus-mars fa-3x fa-spin"></i>
<i class="fa fa-mars-double  fa-3x fa-pulse"></i>
<br>

<!-- 列表 -->
<ul class="fa-ul">
    <li><i class="fa-li fa fa-check-square"></i>can be used</li>
    <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
    <li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>
<br><br><br>

<!-- 组合 -->
<span class="fa-stack fa-lg">
    <i class="fab fa-html5 fa-stack-1x fa-10x"></i>
    <i class="fab fa-css3 fa-stack-1x fa-4x"></i>
    <i class="fab fa-js fa-stack-1x fa-2x"></i>
</span>

效果:

CSS3-字体

 

其中fas/fab是免费的,其他是收费的

图标字体其他使用方式
通过伪元素设置
找到要设置图标的元素通过::before或::after选中
在content中设置字体的编码
设置字体的样式
fab:font-family: 'Font Awesome 5 Brands';
fas:font-family: 'Font Awesome 5 Free'; font-weight:900;
示例
 

<style>
    .poem {
        width: 200px;
        height: 300px;
        margin: auto;
    }

    li {
        list-style: none;
        margin-left: -40px;
    }

    li::before {
        content: '\f130';
        /* font-family: 'Font Awesome 5 Brands'; */
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        margin-right: 10px;
        color: gray;
    }
</style>

<div class="poem">
    <h1>武陵春·春晚</h1>
    <p> [宋] 李清照</p>
    <ul>
        <li>风住尘香花已尽,</li>
        <li>日晚倦梳头。</li>
        <li>物是人非事事休,</li>
        <li>欲语泪先流。</li>
        <li>闻说双溪春尚好,</li>
        <li>也拟泛轻舟。</li>
        <li>只恐双溪舴艋舟,</li>
        <li>载不动、许多愁。</li>
    </ul>
</div>

通过实体设置

通过实体来使用图标字体:&#x图标编码;

示例

<i class="fas">&#xf025;</i>

效果:

CSS3-字体

iconfont
官方网站:https://www.iconfont.cn/

iconfont是阿里的一个图标字体库,海量图标库,图标字体非常丰富

但是版权有点模横两可,如果需要商用,最好联系作者

不过一般情况下,公司企业都会有自己的UI设计团队,会自己去进行设计

这里使用方式大同小异,不过

iconfont需要添加购物车后再添加至项目然后下载,下载包中有demo.html,详细介绍了使用方式
iconfont也提供了一种在线方式,直接在我的项目中选择在线链接可以复制出一份@font-face的css代码

 

上一篇:python编程 从入门到实践 第二、三章 变量和简单数据类型 列表简介


下一篇:09-CSS字体属性之字体系列