css笔记(四)

@font-face {
    /* 指定字体名字 */
    font-family: 'jxust';
    /* 服务器中字体路径 */
    src: url( ),
       

        /* 指定字体格式，一般不写 */
        format('truetype');
}

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

问题

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

2 图标字体

简介

在网页中经常使用到一些图标可以通过图片引入图标但是图片本身比较大，但是非常不灵活

所以还可以将图标直接设定字体，然后通过fontface引入
这样就可以通过使用字体图标的形式来使用图标

2.1fontawsome

使用规范:

官网下载
解压
将css和webfonts移到目录
将all.css引入网页
使用图标字体
直接通过类名来使用图标字体

class="fas fa-bell"

class="fab fa-accessible-icon"
使用示例

<!1    伪类元素设置>
li::before{
    content: "\f1b0";    在content中设置字体的编码
    font-family: 'Font Awesome 5 Free';
    font-family: 'Font Awesome 5 brands';
    font-weight: 700px;           /*fab需要单独设置*/
    color: red;
       
}

<! 2   通过实体设置   &#x图标编码;>
<span class="fas">&#xf0f3;</span>

<!  3   >
<i class="fas fa-cat"></i>

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

2.2iconfont

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

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

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

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

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

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


/*link引入*/
<!-- <link rel="stylesheet" href="/css/iconfont.css"> -->


<style>
<!-- 1、通过字符实体设置 -->
    i.iconfont {
        font-size: 100px;
    }
<!-- 2、通过伪元素设置 -->
    p::before {
        content: '\e811';
        font-family: 'iconfont';
        font-size: 50px;
    }
    
    /*通过在线连接：这里link和@font-face选择一个就可以  */
    @font-face {
        font-family: 'iconfont';
        /* Project id 2580407 */
        src: url('//at.alicdn.com/t/font_2580407_c0kpuhebb7r.woff2?t=1622373966454') 
                           format('woff2'),
            url('//at.alicdn.com/t/font_2580407_c0kpuhebb7r.woff?t=1622373966454') 
                        format('woff'),
            url('//at.alicdn.com/t/font_2580407_c0kpuhebb7r.ttf?t=1622373966454') 
                         format('truetype');
    }
</style>


<body>
<i class="iconfont">&#xe810;</i>
<i class="iconfont">&#xe811;</i>
<i class="iconfont">&#xe812;</i>
<i class="iconfont">&#xe813;</i>

<body>

3 行高

3.1 line height

文字占有的实际高度，可以通过line-height来设置行高

可以直接指定一个大小 px/em
也可以直接为行高设置一个整数（字体大小的倍数）

3.2字体框

字体框就是字体存在的格子，设置font-size实际上就是在设置字体框的高度

行高会在字体框的上下平均分配

3.3 字体的简写属性

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

font: font-style font-variant font-weight font-size/line-height font-family

其中某些值可以不写，会用默认值

font-weight: 字重

normal 不加粗
bold 加测
100-900 表示9个级别（没什么用）
font-style ：字体风格

normal 正常的

italic 斜体

3.4文本样式

text-align 文本水平对齐

left默认值
right 右对齐
center 居中对齐
justify 两端对齐

vertical-align 垂直对齐

baseline 基线对齐默认
top 顶部对齐，父子顶部对齐
bottom 底部对齐
middle 居中对齐一般不用
指定数值调整位置

text-decoration 设置文本修饰

none 默认值什么也没有
underline 下划线
overline 上划线
linethrough 删除线

3.5图片的垂直对齐问题

默认情况下，图片底部有一定缝隙，我们可以稍作修改，给img元素添加vertical-align属性值


  <style>
        div {
            border: 2px solid red;
        }

        img {
            width: 300px;
            height: 300px;
        }
    </style>


<div>

    <img src="img/1.webp" alt="">

</div>

只要不是基线对齐就能消除底部缝隙

img {
            vertical-align: top;
            width: 300px;
            height: 300px;
        }

为什么会出现缝隙呢？

图片属于替换元素，特点与文本一致，也有自己的基线，默认也是基线对齐。而基线位置不在最底部，所以会出现缝隙

如果设置背景图片就没有这种问题

3.6 其他文本样式

white-space

设置网页如何处理空白

可选值：

normal 正常
nowrap 不换行
pre保留空白

浏览器一般只能识别一个空格，除非使用实体

使用white-space：pre 则能让浏览器识别文本中的多个空白字符和换行符

 <style>
        p {
            white-space: pre;
        }
    </style>
</head>

<body>
    <p> fsrggwegw
        vbsfbsfbs
        wegwrgwr
    </p>
</body>

4.背景

4.1background-color

设置背景颜色

4.2background-image

设置背景图片

可以同时设置背景图片的颜色，这样背景颜色将会成为图片的背景
如果背景图片小于元素，则背景图片会在元素中平铺将元素铺满
如果背景图片大于元素将会有一部分图片无法显示
如果两者一样大则会正常显示

4.3background-repeat

repeat 默认值，背景会沿着xy轴双方向重复
repeat-x 沿着x轴方向重复
repeat-y 沿着y轴方向重复
no-repeat 不重复

4.4background-position

用来这只背景图片的位置

通过left…设置图片的位置例如background-position: left center,使用方位词的时要写两个，如果写一个的话，默认第二个是center
通过偏移量指定图片的位置水平和垂直

4.5background-clip

border-box 默认值背景会出现边框下面
padding-box 背景不会出现在边框只出现在内容区和内边距
content-box 背景只出现在内容区

4.6background-origin

背景图片偏移量计算原点

padding-box 背景图片位置（background-position）从内边距开始计算
content-box 背景图片位置从内容区开始计算
border-box 背景图片位置从边框开始计算

4.7background-size

设置背景图片的大小

第一个值表示宽度
第二个值表示高度
如果指定一个值，另一个值就是auto，等比例缩放
cover 比例不变，将元素铺满
content 比例不变图片完整显示

4.8background-attachment

背景图片是否跟随元素滚动

scroll 背景图片跟随元素移动
fixed 背景图片会固定在页面中

4.8简写

background 所有上述相关属性都可以设置没顺序

但是origin在clip前面,background-size和background-positiom顺序为size/position

没有size不能写position

扣1送地狱火

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css笔记(四)

笔记基于尚硅谷1.字体字体相关的样式color 用来设置字体颜色的font-size字体的大小，和font相关的单位em相当于当前元素的一个font-sizerem相当于根元素的一个font-sizefont-familyserif 衬线字体sans-serif 非衬线字体monospace 等宽字体我们经常使用的一些字体，如微软雅黑、黑体、楷体、宋体、Consolas等，才是具体的某种字体也就是说，font-family 指定字体的类别，浏览器会...
复制链接

扫一扫