阅读 125

CSS备忘录(四)font & background

一、字体 font

1.字体(font)

字体相关的样式

color 用来设置字体颜色;

font-size 字体的大小;

  • em 相当于当前元素的一个font-size
  • rem 相对于根元素的一个font-size

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

可选值:

  • serif 衬线字体

  • sans-serif 非衬线字体

  • monospace 等宽字体

    • 指定字体的类别,浏览器会自动使用该类别下的字体
    • font-family 可以同时指定多个字体,多个字体间使用,隔开

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

eg. Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif

指定的字体用户计算机上没有时,@font-face可以将服务器中的字体直接提供给用户去使用 ,但要考虑三个问题。

问题:

  1. 加载速度

  2. 版权

  3. 字体格式

<style>
    @font-face {
            /* 指定字体的名字 */
        font-family:'myfont' ;
        /* 服务器中字体的路径 */
        src: url('./font/ZCOOLKuaiLe-Regular.ttf') format("truetype");
    }

    p{
        color: blue;
        font-size: 40px;

         font-family: 'Courier New', Courier, monospace;
        /*font-family: myfont;*/
    }
</style>
复制代码

2.图标字体(iconfont)

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

常用的图标字体库:fontawesome

fontawesome 使用步骤

1.下载 fontawesome.com/

2.解压

3.将css和webfonts移动到项目中

4.将all.css引入到网页中

<link rel="stylesheet" href="./fa/css/all.css">
复制代码

5.使用图标字体 - 直接通过类名来使用图标字体 class="fas fa-bell" class="fab fa-accessible-icon"

在zeal中查找font awesome文档

image.png

<div style="font-size: 2rem; color:#1bc4fb">
<i class="fa fa-compass"></i>
<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></div>

复制代码

image.png

在style里设置样式的方式

    <style>
        li{
            list-style: none;
        }

        li::before{
            /* 
                通过伪元素来设置图标字体
                    1.找到要设置图标的元素通过before或after选中
                    2.在content中设置字体的编码
                    3.设置字体的样式
                        fab
                        font-family: 'Font Awesome 5 Brands';

                        fas
                        font-family: 'Font Awesome 5 Free';
                        font-weight: 900; 

            */
            content: '\f209';
            /* font-family: 'Font Awesome 5 Brands'; */
            font-family: 'Font Awesome 5 Brands';
            font-weight: 900;
            color: skyblue;
            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>
复制代码

image.png

3.使用阿里字体库iconfont

iconfont支持三种方式使用图标字体

  • Unicode
  • Font class
  • Symbol

image.png 以这三个图标字体为例,说明引用方法。

--Unicode 引用


Unicode 是字体在网页端最原始的应用方式,特点是:

  • 支持按字体的方式去动态调整图标大小,颜色等等。
  • 默认情况下不支持多色,直接添加多色图标会自动去色。

注意:新版 iconfont 支持两种方式引用多色图标:SVG symbol 引用方式和彩色字体图标模式。(使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。)

Unicode 使用步骤如下:

第一步:在 HTML 页面为字体增加 preload,提升字体加载速度:
<link rel="preload" href="//at.alicdn.com/t/font_2767900_d39nq4o3qgk.woff2" as="font" type="font/woff2" crossorigin="anonymous">
复制代码
第二步:拷贝项目下面生成的 @font-face
@font-face {
  font-family: 'iconfont';
  src: url('//at.alicdn.com/t/font_2767900_d39nq4o3qgk.woff2?t=1629873424876') format('woff2'),
       url('//at.alicdn.com/t/font_2767900_d39nq4o3qgk.woff?t=1629873424876') format('woff'),
       url('//at.alicdn.com/t/font_2767900_d39nq4o3qgk.ttf?t=1629873424876') format('truetype');
}
复制代码
第三步:定义使用 iconfont 的样式
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
复制代码
第四步:挑选相应图标并获取字体编码,应用于页面
<span class="iconfont">&#x33;</span>
复制代码

"iconfont" 是你的项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。

效果

image.png

--font-class 引用


font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。

与 Unicode 使用方式相比,具有如下特点:

  • 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
  • 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。

使用步骤如下:

第一步:在 HTML 页面为字体增加 preload,提升字体加载速度:
<link rel="preload" href="//at.alicdn.com/t/font_2767900_d39nq4o3qgk.woff2" as="font" type="font/woff2" crossorigin="anonymous">
复制代码
第二步:引入项目下面生成的 fontclass 代码:
<link rel="stylesheet" href="//at.alicdn.com/t/font_2767900_d39nq4o3qgk.css">
复制代码
第三步:挑选相应图标并获取类名,应用于页面:
<span class="iconfont icon-xxx"></span>
复制代码

效果

image.png

Symbol 引用


这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:

  • 支持多色图标了,不再受单色限制。
  • 通过一些技巧,支持像字体那样,通过 font-sizecolor 来调整样式。
  • 兼容性较差,支持 IE9+,及现代浏览器。
  • 浏览器渲染 SVG 的性能一般,还不如 png。

使用步骤如下:

第一步:引入项目下面生成的 symbol 代码:
<script src="//at.alicdn.com/t/font_2767900_d39nq4o3qgk.js"></script>
复制代码
第二步:加入通用 CSS 代码(引入一次就行):
<style>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
复制代码
第三步:挑选相应图标并获取类名,应用于页面:
<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>
复制代码

效果

image.png

4.字体行高

行高(line height)

  • 行高指的是文字占有的实际高度
  • 可以通过line-height来设置行高 行高可以直接指定一个大小(px em) 也可以直接为行高设置一个整数 如果是一个整数的话,行高将会是字体的指定的倍数
  • 行高经常还用来设置文字的行间距 行间距 = 行高 - 字体大小

字体框 字体框就是字体存在的格子,设置font-size实际上就是在设置字体框的高度,行高会在字体框的上下平均分配。

 <style>
 div{
        font-size: 50px;

        /* 可以将行高设置为和高度一样的值,使单行文字在一个元素中垂直居中 */
        line-height: 100px;

        border: 1px red solid;

        /* line-height: 1.33; */
        /* line-height: 1; */
        /* line-height: 10 */
    }
</style>
复制代码

字体的简写属性

<style>
    div{
        border: 1px red solid;


        /* 
            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; */
        font: bold italic 50px/2  微软雅黑, 'Times New Roman', Times, serif;
        /* font:50px 'Times New Roman', Times, serif;
        line-height: 2; */

        /* font-size: 50px; */

        /* font-weight 字重 字体的加粗 
            可选值:
                normal 默认值 不加粗
                bold 加粗
                100-900 九个级别(没什么用)

            font-style 字体的风格
                normal 正常的
                italic 斜体
        */
        /* font-weight: bold; */
        /* font-weight: 500;
        font-style: italic; */


    }
</style>
复制代码
5.文本的布局

text-align

文本的水平对齐,可选值: - left 左侧对齐

  • right 右对齐
  • center 居中对齐
  • justify 两端对齐

vertical-align

设置元素垂直对齐的方式,可选值:

  • baseline 默认值 基线对齐
  • top 顶部对齐
  • bottom 底部对齐
  • middle 居中对齐

文本的样式:

text-decoration 设置文本修饰

可选值:

  • none 什么都没有
  • underline 下划线
  • line-through 删除线
  • overline 上划线

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

可选值:

  • normal 正常
  • nowrap 不换行
  • pre 保留空白
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
复制代码

可以将多行文字只显示部分,并用省略号代替。

image.png

二、背景 background

1.background

background-image --设置背景图片

  1. 可以同时设置背景图片和背景颜色,这样背景颜色将会成为图片的背景色
  2. 如果背景的图片小于元素,则背景图片会自动在元素中平铺将元素铺满
  3. 如果背景的图片大于元素,将会一个部分背景无法完全显示
  4. 如果背景图片和元素一样大,则会直接正常显示
.box1{
    width: 500px;
    height: 500px;
background-color: #bfa;

background-image: url("./img/1.png");
}
复制代码

image.png

background-repeat 用来设置背景的重复方式

可选值:

  1. repeat 默认值 , 背景会沿着x轴 y轴双方向重复
  2. repeat-x 沿着x轴方向重复
  3. repeat-y 沿着y轴方向重复
  4. no-repeat 背景图片不重复

background-position 用来设置背景图片的位置

设置方式:

  1. 通过 top left right bottom center 几个表示方位的词来设置背景图片的位置
  2. 使用方位词时必须要同时指定两个值,如果只写一个则第二个默认就是center
  3. 通过偏移量来指定背景图片的位置: 水平方向的偏移量 垂直方向变量
 background-repeat: no-repeat;
 background-position: -50px 300px;
复制代码

image.png

设置背景的范围

  • background-clip 可选值: border-box 默认值,背景会出现在边框的下边 padding-box 背景不会出现在边框,只出现在内容区和内边距 content-box 背景只会出现在内容区

  • background-origin 背景图片的偏移量计算的原点 padding-box 默认值,background-position从内边距处开始计算 content-box 背景图片的偏移量从内容区处计算 border-box 背景图片的变量从边框处开始计算

  • background-size 设置背景图片的大小

第一个值表示宽度

第二个值表示高度

-如果只写一个,则第二个值默认是 auto

-cover 图片的比例不变,将元素铺满

-contain 图片比例不变,将图片在元素中完整显示


        background-color
        background-image
        background-repeat
        background-position
        background-size
        background-origin
        background-clip
        background-attachment
复制代码

backgound 背景相关的简写属性,所有背景相关的样式都可以通过该样式来设置 并且该样式没有顺序要求,也没有哪个属性是必须写的

注意:

  1. background-size必须写在background-position的后边,并且使用/隔开

background-position/background-size

  1. background-origin background-clip 两个样式 ,orgin要在clip的前边

background-attachment 背景图片是否跟随元素移动

可选值:

scroll 默认值 背景图片会跟随元素移动

fixed 背景会固定在页面中,不会随元素移动

3.线性渐变

通过渐变可以设置一些复杂的背景颜色,可以实现从一个颜色向其他颜色过渡的效果 !!渐变是图片,需要通过background-image来设置。

线性渐变,颜色沿着一条直线发生变化 linear-gradient()

linear-gradient(red,yellow) 红色在开头,黄色在结尾,中间是过渡区域。 线性渐变的开头,我们可以指定一个渐变的方向。

  • to left

  • to right

  • to bottom

  • to top

  • deg deg表示度数

  • turn 表示圈

  • 渐变可以同时指定多个颜色,多个颜色默认情况下平均分布, 也可以手动指定渐变的分布情况

    repeating-linear-gradient() 可以平铺的线性渐变。

<style>
    .box1{
        width: 200px;
        height: 200px;

        
        /* background-image: linear-gradient(red,yellow,#bfa,orange); */
        /* background-image: linear-gradient(red 50px,yellow 100px, green 120px, orange 200px); */
        background-image: repeating-linear-gradient(to right ,red, yellow 50px);

    }
</style>
复制代码

image.png

4.径向渐变

radial-gradient() 径向渐变(放射性的效果)

默认情况下径向渐变的形状根据元素的形状来计算的

正方形 --> 圆形

长方形 --> 椭圆形

  • 我们也可以手动指定径向渐变的大小 circle ellipse

  • 也可以指定渐变的位置

    • 语法:

    radial-gradient(大小 at 位置, 颜色 位置 ,颜色 位置 ,颜色 位置)

    大小:

  1. circle 圆形
  2. ellipse 椭圆
  3. closest-side 近边
  4. closest-corner 近角
  5. farthest-side 远边
  6. farthest-corner 远角

位置: top right left center bottom

<style>
        .box1{
            width: 300px;
            height: 300px;

            background-image: radial-gradient(farthest-corner at 100px 100px, red , #bfa);
         }
    </style>
复制代码

image.png

<style>
        .box1{
            width: 300px;
            height: 300px;

           background-image: radial-gradient(red, yellow, green)
        }
    </style>
复制代码

image.png

文章分类
前端
文章标签