11 字体

11 字体

1.字体相关的样式

  • color:用来设置字体颜色
  • font-size:字体大小
    • em:相当于当前元素的一个font-size
    • rem相当于根元素的一个font–size

2.字体格式font-family

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

  • such as:font-family:‘微软雅黑’;

  • 字体的分类:

    • serif衬线字体
    • sans-serif:非衬线字体
    • monospace:等宽字体
    • cursive:手写体
    • fantasy:梦幻字体
  • 以上不是平时的某种字体,而是字体的分类

  • 我们经常使用的一些字体:微软雅黑,黑体,宋体,楷体等

  • font-family可以指定多个字体,多个字体之间用逗号隔开

  • 字体生效时优先使用第一个,第一个无法使用则使用第二个

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;
}
  • 加载速度:受网络速度影响,可能会出现字体闪烁一下变成最终的字体

  • 版权:有些字体是商用收费的,需要注意

  • 字体格式:字体格式也有很多种(woff、otf、ttf),未必兼容,可能需要指定多个

4.图标字体(iconfont)

图标字体简介:

  • 在网页中经常需要用一些图标,可以通过图片来引入图标但是图片大小本身比较大,并且非常的不灵活。
  • 所以在使用图标时,我们可以将图标直接设置为字体,然后通过@font-size的形式来进行引入
  • 这样我们就可以通过使用字体的形式来使用图标

怎么把图标制作成字体?与程序员无关,直接从网上的图标字体库寻找。。

  • fontawesome(图标字体库)
  • 官网:https://fontawesome.com/
  • 下载解压完成之后,直接将css和webfonts移动到项目中即可使用
  • 将all.css引入网页中
  • 使用图标字体
    • 直接通过类名来使用图标字体
    • 格式:class=“fas空格类名”
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./fa/css/all.css">
</head>
<body>
/*
	class="fas fa-bell"
	class="fab fa-accessible-icon"
       */
    <i class="fas fa-bell" style="font-size:80px; color:red;"></i>
    <i class="fas fa-bell-slash"></i>
    <i class="fab fa-accessible-icon"></i>
    <i class="fas fa-otter" style="font-size: 160px; color:green;"></i>
</body>
</html>

5.图标字体其他使用方式

通过伪元素来设置图标字体

1.找到要设置图标的元素通过::before或::after选中

2.在content中设置字体的编码

3.设置字体的样式

  • fab

​ font-family: ‘Font Awesome 5 Brands’;

  • fas

​ font-family: ‘Font Awesome 5 Free’;

​ font-weight: 900;

  • <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <link rel="stylesheet" href="./fa/css/all.css">
        <style>
            li{
                list-style: none;
            }
    
            li::before{
                
                content: '\f1b0';
                /* font-family: 'Font Awesome 5 Brands'; */
                font-family: 'Font Awesome 5 Free';
                font-weight: 900; 
                color: blue;
                margin-right: 10px;
            }
        </style>
    </head>
    <body>
    
        <!-- <i class="fas fa-cat"></i> -->
    
        <ul>
            <li>锄禾日当午</li>
            <li>汗滴禾下土</li>
            <li>谁知盘中餐</li>
            <li>粒粒皆辛苦</li>
        </ul>
    
        <!-- 
    
            通过实体来使用图标字体:
                &#x图标的编码;
         -->
        <span class="fas">&#xf0f3;</span>
        
    </body>
    </html>
    

6,行高

6.1 行高(line height)

  • 行高指的是文字占有的实际高度

  • 可以通过line-height来设置行高

  • 行高可以直接指定一个大小(px em)

  • 也可以直接为行高设置一个整数

  • 如果是一个整数的话,行高将会是字体的指定的倍数

​ - 行高经常还用来设置文字的行间距

​ 行间距 = 行高 - 字体大小

6.2 字体框

  • 字体框就是字体存在的格子,设置font-size实际上就是在设置字体框的高度
  • 行高会在字体框的上下平均分配
  • 行高大概是字体大小的1.2-1.3倍

7.字体的简写属性

font 可以设置字体相关的所有属性

语法:

  • font: 字体大小/行高 字体族(这两个必须写,写在最后)
  • 行高 可以省略不写 如果不写使用默认值
font-size: 50px;
font-family: 'Times New Roman', Times, serif; 
font-weight: bold;
/*以上为分开写*/
font: 50px/2  微软雅黑, 'Times New Roman', Times, serif;
/*此为合起来写*/
 font: normal normal 50px/2  微软雅黑, 'Times New Roman', Times, serif;
/*若再此写normal会覆盖原本写的*/
font: bold italic 50px/2  微软雅黑, 'Times New Roman', Times, serif;
/*字体大小后/接行高*/
font:50px 'Times New Roman', Times, serif;
            line-height: 2;
/*行高如果没写,使用默认值*/
二
font-weight 字重 字体的加粗 
可选值:
normal 默认值 不加粗
bold 加粗
100-900 九个级别(没什么用)
三
font-style 字体的风格
可选值:
normal 正常的
italic 斜体

8 文本的对齐方式

8.1 水平对齐

text-align属性值对齐方式说明
left左侧对齐
right右侧对齐
center居中对齐
justify两端对齐

8.2 垂直对齐

vertical-align对齐方式说明
baseline基线对齐
top顶部对齐
bottom底部对齐
middle居中对齐

8.3 图片对齐

图片引入相当于做了一个替换,故可以将其当作字,那么必然有空隙,因其跟着基线对齐,如何取消空隙呢?

/* 只要不是基线对齐,就能消除底部缝隙 */
vertical-align: top;
vertical-align: bottom;
vertical-align: middle;

9其它

9.1 text-decoration 设置文本修饰

可选值:

  • none 什么都没有
  • underline 下划线
  • line-through 删除线
  • overline 上划线
/* text-decoration: overline; */
 /* text-decoration: underline red dotted; */

以上为设置样式颜色

9.2 white-space 设置网页如何处理空白

可选值:

  • normal 正常
  • nowrap 不换行
  • pre 保留空白
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;/*省略号*/
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值