【前端学习之HTML&CSS进阶篇】- CSS第一篇 - @规则与web字体图标

文章目录

【前端学习之HTML&CSS进阶篇】- CSS第一篇 - @规则与web字体图标
前言
- 一、@规则
- - 1. 概念
  - 2. 用法
  - - （1）import:
    - （2）charset
- 二、web字体和图标
- - 1. web字体
  - 2. 字体图标
  - - （1）在线方式：
    - （2）离线方式：
    - （3）unicode方式：
总结

本文具体内容参考了B站渡一教育的课程，原课程链接如下：
渡一教育课程

前言

html与css以及今后我们将会学到的js共同构成了前端技术中最重要的三种语言，在学习过程中，我们首先从html出发，在html的学习过程中深入了解css。在前几节博客中我们学习到了HTML中多种多样的元素，本节内容开始，让我们进入CSS进阶部分的学习。

一、@规则

1. 概念

全称为at-rule: 又叫@规则、@语句、CSS语句、CSS指令

2. 用法

（1）import:

书写方法：@import “路径”;
用处：导入另外一个CSS文件;
例如，直接在HTML文件中利用link链接index.css;然后在index.css中书写@引入reset即可；

    @import "reset.css";

注意：此时打开文件的顺序为由index文件打开reset文件

（2）charset

使用方法：@charset "utf-8"; 注意“”此代码必须写到第一行
作用：告诉浏览器该CSS文件，使用的字符编码集是UTF-8；

二、web字体和图标

1. web字体

问题：用户电脑上没有安装相应字体；

    p{/* 例如此时电脑里没有翩翩体 */font-family: "翩翩体-简", "Arail", "微软雅黑", "sans-serif";}

下图左侧是没有对应字体后的效果，会采用font-family后面的字体，右侧是将font放入文件夹内部的结构

做法：强制用户下载字体文件，使用font-face制作字体：

    /* 自己制作一个字体 */@font-face{font-family: "good night";src: url("./font/晚安体.ttf");}p{font-family: "good night";}

2. 字体图标

字体图标网站：iconfont.cn 一个前端图标领域强烈推荐的网站

进入网站后，首先登录：
登录完成后搜索图标并加入购物车
在购物车界面选择项目(首次需要新建)
三种使用图标的方法如下：

（1）在线方式：

选择font class，生成代码并复制(实际上是生成了一个CSS文件)
使用link链接，href处粘贴代码
想要使用某一个图标：复制该图标代码
使用i元素【推荐】，添加两个类样式，一个是iconfont、另一个则是复制代码

.icon-anemo{color: rgb(32, 228, 136);}

<i class="iconfont icon-anemo"></i>

重点：这个图标实际上不是图片，而是一种字体，可以修改颜色、大小等属性，且放大后不会模糊

（2）离线方式：

选择下载至本地，将除demo.css以及html文件外的文件复制到css目录下

使用link链接iconfont.css即可，其余操作相同；

（3）unicode方式：

类样式，直接复制一个at指令，远程读取字体文件

 <style>@font-face {font-family: 'iconfont';  /* Project id 3262259 */src: url('//at.alicdn.com/t/font_3262259_u0c0c3pnrb.woff2?t=1647776165276') format('woff2'),url('//at.alicdn.com/t/font_3262259_u0c0c3pnrb.woff?t=1647776165276') format('woff'),url('//at.alicdn.com/t/font_3262259_u0c0c3pnrb.ttf?t=1647776165276') format('truetype');}.iconfont{font-family: "iconfont"}
</style>

使用某一个图标时：

    <!-- unicode --><i class="iconfont"><!-- 复制某个字体的代码 --></i>

图标效果如图：

总结

本文主要介绍了关于@规则和web字体图标的相关知识，其中@规则在一般情况下使用不多，了解两种情况即可，对于web字体，要掌握下载字体使用的方法；web图标则要掌握icon-font的使用途径。

【前端学习之HTMLCSS进阶篇】-- CSS第一篇 -- @规则与web字体图标相关推荐

【前端学习之HTMLCSS进阶篇】-- HTML第四篇 -- 美化表单
[前端学习之HTML&CSS进阶篇]-- HTML第四篇 – 美化表单文章目录 [前端学习之HTML&CSS进阶篇]-- HTML第四篇 -- 美化表单前言一.新的伪类 1. f ...
【前端学习之HTMLCSS】-- HTML第七篇 -- 图片元素与多媒体元素
[前端学习之HTML&CSS]-- HTML第七篇 – 图片元素与多媒体元素文章目录 [前端学习之HTML&CSS]-- HTML第七篇 -- 图片元素与多媒体元素前言图片元素 ...
《FusionCharts学习及使用笔记》之第一篇
<FusionCharts学习及使用笔记>之第一篇其实一直以来我都在有意无意的把我平常工作中遇到并解决的问题做个记录,放到我的网易博客中.但却一直没有想过如何把我使用的技术做一个系列化 ...
自学前端第二十五:web字体图标使用
web字体图标:本质是字体,伪元素联用的出现一个白色框即字体失效的检查: ①路径那里是不是fonts文件夹的第一子路径就是全部的文件. ②/+unicode编码和转义编码有没有弄棍 (一个给c ...
【前端学习之HTMLCSS】-- CSS第三篇 -- 选择器（上）
[前端学习之HTML&CSS]-- CSS第三篇 – 选择器(上) 文章目录 [前端学习之HTML&CSS]-- CSS第三篇 -- 选择器(上) 前言选择器简单选择器 1. ID ...
前端学习笔记——JavaScript进阶
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.JavaScript 面向对象 1. 面向对象编程介绍 1.1 两大编程思想 1.2 面向过程编程 1.3 面向对 ...
【前端三剑客三】JavaScript手术刀剖析第一篇
文章目录一.初始JavaScript 1.JavaScript是什么 2.JavaScript . HTML . CSS 之间的关系 3.JavaScript 运行过程 4.JavaScript 的 ...
【前端学习之HTMLCSS】-- 视觉格式化模型之二浮动 -- 练习
[前端学习之HTML&CSS]-- 视觉格式化模型之二浮动 – 练习文章目录 [前端学习之HTML&CSS]-- 视觉格式化模型之二浮动 -- 练习前言设计稿/原有样式代码 ...
恭喜你！在28岁前看见了腾讯顶级产品经理的进阶之路——第一篇《用户》
随着我国新媒体网络技术的飞速发展,许多新兴产业也随之诞生,增加了许多的就业机会,例如新媒体推广运营工作.在纷繁复杂的网络环境下,如何通过平台的推荐机制,如何使其精准的抵达至你的目标用户群体呢?艺形艺意 ...

【前端学习之HTMLCSS进阶篇】-- CSS第一篇 -- @规则与web字体图标