颜色 color 字体 font 图标字体
color
color 前景色，通常用來設置字體的顏色
transparent
特殊的顏色，transparent 透明色，一般所有背景顏色的默認值
顏色單位
在CSS中可以直接使用顏色名來設置各種顏色
比如：red、orange、yellow、blue、green ... ...
但是在css中直接使用顏色名是非常的不方便
RGB值
RGB通過三種顏色的不同濃度來調配出不同的顏色
R red，G green ，B blue
每一種顏色的范圍在 0 - 255 (0% - 100%) 之間
語法：RGB(紅色,綠色,藍色)
e.g. color: rgb(250,80,100);
Hello World!
RGBA
就是在rgb的基礎上增加了一個a表示不透明度
需要四個值，前三個和rgb一樣，第四個表示不透明度
1表示完全不透明 0表示完全透明 .5半透明
e.g. color: rgba(250,80,100,.5);
Hello World!
十六進制的RGB值
語法：#紅色綠色藍色
顏色濃度通過 00-ff
如果顏色兩位兩位重復可以進行簡寫
#bbffaa --> #bfa
e.g. color: #bfa 護眼豆沙綠
Hello World!
HSL值 HSLA值
H 色相(0 - 360)
S 飽和度，顏色的濃度 0% - 100%
L 亮度，顏色的亮度 0% - 100%
A 不透明度
e.g. color: hsla(98,48%,40%,0.658);
Hello World!
font-size
font-size 設置字體的大小
字體大小單位
像素
屏幕（顯示器）實際上是由一個一個的小點點構成的
不同屏幕的像素大小是不同的，像素越小的屏幕顯示的效果越清晰
所以同樣的20px在不同的設備下顯示效果不一樣
而網頁字體默認的大小為 16px
e.g. font-size: 25px;
Hello World!
em
em 是相對于元素的字體大小來計算的
1em = 1*font-size
em 相當于當前元素的一個font-size
rem
rem 是相對于根元素的字體大小來計算
rem 相對于根元素的一個 font-size（16px）
font-family
font-family 字體族（字體的格式）
可選值：
serif 襯線字體類
你好世界 Hello World
sans-serif 非襯線字體類
你好世界 Hello World
monospace 等寬字體類
你好世界 Hello World
除了這些，還有像 cursive fantasy 之類不常用的字體類
上面這些值是指定字體的類別，瀏覽器會自動使用該類別下的字體
font-family 可以同時指定多個字體，多個字體間使用 , 隔開
字體生效時優先使用第一個，第一個無法使用則使用第二個 以此類推
@font-face
可以將服務器中的字體直接提供給用戶去使用
@font-face {
/* 指定字體的名字 */
font-family:'myfont' ;
/* 服務器中字體的路徑 */
src: url('./font/ZCOOLKuaiLe-Regular.ttf') format("truetype");
/* format 指定字體文件格式，一般都不用寫 */
}
p {
font-family: myfont;
}
可能會有些問題：
加載速度
版權
字體格式
.ttf woff 之類的
圖標字體（iconfont）
在網頁中經常需要使用一些圖標，可以通過圖片來引入圖標
但是圖片大小本身比較大，并且非常的不靈活
所以在使用圖標時，我們還可以將圖標直接設置為字體，然后通過font-face的形式來對字體進行引入
這樣我們就可以通過使用字體的形式來使用圖標
引用圖標有3中方式：（下面會講到）
引用類
實體
設置偽元素
fontawesome
fontawesome 使用步驟
下載 https://fontawesome.com/
解壓
將 css 和 webfonts 移動到項目中，必須在同一級目錄下
將 all.css (或 all.min.css) 引入到網頁中
使用圖標字體
直接通過類名來使用圖標字體
class="fas fa-bell"
class="fab fa-accessible-icon"
fas 和 fab 是設置字體格式，后面的就是詳細的那種圖標
注意：fas 和 fab 是免費的
<!-- 通常用 i 標簽來創建圖標元素 -->
<!-- 可以根據需要，來調整圖標的大小，顏色等樣式 -->
<i class="fas fa-bell"></i>
<i class="fas fa-bell-slash"></i>
<i class="fab fa-accessible-icon"></i> <!-- otto -->
<i class="fas fa-otter"></i>
其他引用方式
<head>
<link rel="stylesheet" href="./fa/css/all.css">
<style>
li{
list-style: none;
}
/* 通過設置偽類的方式使用圖標 */
li::before{
content: 'f1b0';
/*font-family: 'Font Awesome 5 Brands'; */ /* fab */
font-family: 'Font Awesome 5 Free';
font-weight: 900; /* fas */
color: blue;
margin-right: 10px;
}
</style>
</head>
<body>
<!-- <i class="fas fa-cat"></i> -->
<ul>
<li>鋤禾日當午</li>
<li>汗滴禾下土</li>
<li>誰知盤中餐</li>
<li>粒粒皆辛苦</li>
</ul>
<!--
<span class="fas fa-bell"></span>
除了引用類的方式
還可以通過實體來使用圖標字體：
格式： &#x圖標的編碼;
-->
<span class="fas"></span>
</body>
阿里圖標庫
阿里圖標庫里面有很多圖標，使用方式和上面的 fontawesome 差不多
https://www.iconfont.cn/
打開主頁，搜索或者查看需要的圖標，加至購物車，然后導入項目，查看此項目，可以下載到本地，也可以使用在線的 css（推薦）
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" />
<style>
.iconfont {
font-size: 50px;
color: red;
}
p::before {
content: "e600";
font-family: "iconfont";
font-size: 100px;
color: red;
}
</style>
</head>
<body>
<i class="iconfont icon-like"></i> <!-- 引用類 -->
<i class="iconfont"></i> <!-- 實體 -->
<p>LOVE</p> <!-- 設置偽元素 -->
</body>
效果：
行高
行高（line-height）
行高指的是文字占有的實際高度
可以通過 line-height 來設置行高
行高可以直接指定一個大小（px emd 等）
也可以直接為行高設置一個整數（默認是 line-height: 1.33;）
如果是一個整數的話，行高將會是字體的指定的倍數
字體框
字體框就是字體存在的格子，設置 font-size 實際上就是在設置字體框的高度
行高會在字體框的上下平均分配
可以將行高設置為和高度一樣的值，使單行文字在一個元素中垂直居中
div {
font-size: 50px;
height: 200px; /* 可以不寫 */
line-height: 200px;
border: 1px red solid;
}
div {
font-size: 50px;
height: 30px;
border: 1px red solid;
}
div {
font-size: 50px;
line-height: 30px;
border: 1px red solid;
}
行高經常還用來設置文字的行間距
行間距 = 行高 - 字體大小
div {
font-size: 50px;
line-height: 200px;
border: 1px red solid;
}
字體簡寫屬性
font
font 可以設置字體相關的所有屬性
語法：
font: 字體大小/行高 字體族 （字體大小 和 字體族 是必須寫的）
行高 可以省略不寫 如果不寫使用默認值（line-height: normal;）
font: font-style font-variant font-weight font-size/line-height font-family;
e.g.
font: 50px/2 微軟雅黑, 'Times New Roman', Times, serif;
div {
line-height: 2;
font: 50px 微軟雅黑, 'Times New Roman', Times, serif;
/* 此時呢，上面的 line-height: 2; 就失效了，因為后面的 font 給覆蓋了成了 normal（默認值）*/
/* 解決這種情況，要么在 font 內設置，要么把 line-height 放到下面來 */
}
font-variant
normal 默認值
small-caps 將小寫字母變成大寫，并且比普通的大寫字母變得小一些，而原本大寫的字母不發生改變
font-weight
font-weight 字重 字體的加粗
可選值：
normal 默認值 不加粗
bold 加粗
lighter 減細
100-900 九個級別（一般沒什么用，因為字體文件里一般都有 正常 normal 和 加粗 bold 的字體，所以這些幾百的級別都沒作用）
font-style
font-style 字體的風格
normal 正常的
italic 斜體
上面這倆屬性也可以加到 font 里，這倆的順序無所謂，但要放在最前面
div {
border: 1px red solid;
font-weight: normal; /* 因為下面覆蓋設置了，所以這個會失效 */
font: bold italic 50px/2 微軟雅黑, 'Times New Roman', Times, serif;
}
文本的樣式
text-align
text-align 文本的水平對齊
可選值：
left 左側對齊（默認值）
right 右對齊
center 居中對齊
justify 兩端對齊
left
right
center
justify
vertical-align
vertical-align 設置元素垂直對齊的方式
可選值：
baseline 默認值 基線對齊
top 頂部對齊
bottom 底部對齊
middle 居中對齊（一般不是我們所謂的居中）
具體值 e.g. vertical-align: 100px; 正數向上，負數向下
<style>
div {
800px;
border: 1px red solid;
font-size: 50px;
}
span {
font-size: 20px;
border: 1px blue solid;
vertical-align: baseline;
}
</style>
<div>今天天氣 Helloyx <span>真不錯 Hello</span> ！</div>
<style>
p {
border: 1px red solid;
}
img {
vertical-align: bottom;
/* 圖片是帶 基線 baseline的，所以在默認垂直對齊下，圖片與父元素邊框（被撐開的情況下）下面會有一段空隙 */
/* 消除這段空隙的解決辦法就是設置 非 baseline 值的 vertical-align */
}
</style>
<p>
<img src="./img/an.jpg" alt="" />
</p>
不設置 vertical-align
設置了非 baseline 值的 vertical-align
text-decoration
text-decoration 設置文本修飾
值：
text-decoration-color 修飾線的顏色
text-decoration-line 修飾線的位置
text-decoration-style 修飾線的樣式
text-decoration-thickness 修飾線的粗細
這些值都可以簡寫到 text-decoration 里
text-decoration-line 可選值：
none 什么都沒有
Hello World!
underline 下劃線
Hello World!
line-through 刪除線
Hello World!
overline 上劃線
Hello World!
text-decoration-style 可選值：
solid 單實線
Hello World!
double 雙實線
Hello World!
dotted 點線
Hello World!
dashed 虛線
Hello World!
wavy 波浪線
Hello World!
注意：這些值IE可能不支持
white-space
white-space 設置網頁如何處理空白
可選值：
normal 正常，換行
nowrap 不換行
pre 保留空白
normal
<style>
.box2{
200px;
border: 1px red solid;
white-space: normal;
}
</style>
<div class="box2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur,
minus fugit in perspiciatis reprehenderit consequuntur aspernatur repellat
cumque quidem asperiores quaerat placeat, tenetur vel veritatis deserunt
numquam. Dolores, cupiditate enim.
</div>
<div class="box1">
今天天氣真不錯
</div>
pre
<style>
.box2{
200px;
border: 1px red solid;
white-space: pre;
}
</style>
<div class="box2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur,
minus fugit in perspiciatis reprehenderit consequuntur aspernatur repellat
cumque quidem asperiores quaerat placeat, tenetur vel veritatis deserunt
numquam. Dolores, cupiditate enim.
</div>
<div class="box1">
今天天氣真不錯
</div>
nowrap
<style>
.box2{
200px;
border: 1px red solid;
white-space: nowrap;
}
</style>
<div class="box2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur,
minus fugit in perspiciatis reprehenderit consequuntur aspernatur repellat
cumque quidem asperiores quaerat placeat, tenetur vel veritatis deserunt
numquam. Dolores, cupiditate enim.
</div>
<div class="box1">
今天天氣真不錯
</div>
實現多余的文字用省略號 ...
<style>
.box2{
border: 1px red solid;
200px; /* 顯示文字的寬度 */
white-space: nowrap; /* 文字不換行 */
overflow: hidden; /* 超出的不顯示 */
text-overflow: ellipsis; /* 顯示省略符號來代表被修剪的文本 */
/* 缺一不可 */
}
</style>
<div class="box2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur,
minus fugit in perspiciatis reprehenderit consequuntur aspernatur repellat
cumque quidem asperiores quaerat placeat, tenetur vel veritatis deserunt
numquam. Dolores, cupiditate enim.
</div>
<div class="box1">
今天天氣真不錯
</div>
text-transform
設置字母大小寫
text-indent
設置文本縮進
<!-- 這樣標簽里的文字就看不到了，但有利于SEO -->
<p>
標題
</p>
總結
以上是生活随笔為你收集整理的颜色 color 字体 font 图标字体的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [ipsec][strongswan]
- 下一篇： RESTful 接口实现简明指南