字體

時間  2021-01-02
標籤 css html git web 瀏覽器 服務器 ide 字體 編碼 欄目 CSS 简体版
原文   原文鏈接

color

color 前景色，一般用來設置字體的顏色css

顏色單位

在CSS中能夠直接使用顏色名來設置各類顏色
好比：red、orange、yellow、blue、green ... ...
可是在css中直接使用顏色名是很是的不方便html

RGB值

RGB經過三種顏色的不一樣濃度來調配出不一樣的顏色
R red，G green ，B blue
每一種顏色的範圍在 0 - 255 (0% - 100%) 之間git

語法：RGB(紅色,綠色,藍色)
e.g. color: rgb(250,80,100);web

Hello World!瀏覽器

RGBA

就是在rgb的基礎上增長了一個a表示不透明度
須要四個值，前三個和rgb同樣，第四個表示不透明度
1表示徹底不透明 0表示徹底透明 .5半透明服務器

e.g. color: rgba(250,80,100,.5);ide

Hello World!字體

十六進制的RGB值

語法：#紅色綠色藍色
顏色濃度經過 00-ffui

若是顏色兩位兩位重複能夠進行簡寫
#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 字體族（字體的格式）

可選值：

  1. serif 襯線字體類

    你好世界 Hello World

  2. sans-serif 非襯線字體類

    你好世界 Hello World

  3. 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中方式：（下面會講到）

  1. 引用類
  2. 實體
  3. 設置僞元素

fontawesome

fontawesome 使用步驟

  1. 下載 https://fontawesome.com/
  2. 解壓
  3. 將 css 和 webfonts 移動到項目中，必須在同一級目錄下
  4. 將 all.css (或 all.min.css) 引入到網頁中
  5. 使用圖標字體

直接經過類名來使用圖標字體

class="fas fa-bell"

class="fab fa-accessible-icon"

fas 和 fab 是設置字體格式，後面的就是詳細的那種圖標

注意：fas 和 fab 是免費的

<!-- 一般用 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>	<!-- otto -->
<i class="fas fa-otter" style="font-size: 160px; color:green;"></i>

image-20201219173859294


其餘引用方式

<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">&#xf0f3;</span>
    
</body>

image-20201219175425942

阿里圖標庫

阿里圖標庫裏面有不少圖標，使用方式和上面的 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" href="//at.alicdn.com/t/font_2280834_a3jjthi2f8.css"/>
    <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">&#xe600;</i>	<!-- 實體 -->
    <p>LOVE</p>	<!-- 設置僞元素 -->
</body>

效果：

image-20201219190242824

行高

行高（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;
}

image-20201220163435010


div {
    font-size: 50px;
    height: 30px;
    border: 1px red solid;
}

image-20201220163859284


div {
    font-size: 50px;
    line-height: 30px;
    border: 1px red solid;
}

image-20201220164025293

行高常常還用來設置文字的行間距

行間距 = 行高 - 字體大小

div {
    font-size: 50px;
    line-height: 200px;
    border: 1px red solid;
}

image-20201220162358035

字體簡寫屬性

font

font 能夠設置字體相關的全部屬性

語法：

font: 字體大小/行高 字體族 （字體大小 和 字體族 是必須寫的）
行高 能夠省略不寫 若是不寫使用默認值（line-height: normal;）

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-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;
}

image-20201220165552070

文本的樣式

text-align

text-align 文本的水平對齊

可選值：

  1. left 左側對齊（默認值）
  2. right 右對齊
  3. center 居中對齊
  4. justify 兩端對齊

left

image-20201220171902258

right

image-20201220171925455

center

image-20201220171946523

justify

image-20201220172025102

vertical-align

vertical-align 設置元素垂直對齊的方式

可選值：

  1. baseline 默認值 基線對齊
  2. top 頂部對齊
  3. bottom 底部對齊
  4. middle 居中對齊（通常不是咱們所謂的居中）
  5. 具體值 e.g. vertical-align: 100px; 正數向上，負數向下
<style>
    div {
        width: 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>

image-20201220173514368

<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

image-20201220174315853

設置了非 baseline 值的 vertical-align

image-20201220174235483

text-decoration

text-decoration 設置文本修飾

值：

  1. text-decoration-color 修飾線的顏色
  2. text-decoration-line 修飾線的位置
  3. text-decoration-style 修飾線的樣式
  4. 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 設置網頁如何處理空白

可選值：

  1. normal 正常，換行
  2. nowrap 不換行
  3. pre 保留空白

normal

<style>
    .box2{
        width: 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>

image-20201220181602102

pre

<style>
    .box2{
        width: 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>

image-20201220181647297

nowrap

<style>
    .box2{
        width: 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>

image-20201220181832724

實現多餘的文字用省略號 ...

<style>
    .box2{
        border: 1px red solid;
        width: 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>

image-20201220182019952

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程