css基礎—字體那些事

pkhope 發布于2019-08-02 10:06 / 3147人閱讀

摘要：因為網頁中可能存在中英文，中英文的字體樣式不同。要首先寫英文字體，在寫中文字體。上下移動目前可以使用文本修飾下劃線刪除線上劃線無字間距詞間距字間距詞間距和共同使用強制換行由于中文會強制換行，但是因為英文和數字不會強制換行。

css基礎—字體那些事

1. 首先講字的大小樣式等

字體大小 font-size: 40px;

文字字體 font-family: "宋體",Arial;

文字樣式 font-style:normal;

    -normal:正常字體
    -italic，oblique:斜體

字體加粗 font-weight: bold;

每行所占高度（行高） line-height: 50px;

疑問一: 文字字體怎么會同時寫兩個值？
解答:
是首選和備選的關系，不只可以寫兩個，還可以寫多個。放在第一個位置的是首選，后面的是備選。因為網頁中可能存在中英文，中英文的字體樣式不同。
font-family：首選，備選1，備選2.....

注意：當網頁上存在中文和英文的時候。要首先寫英文字體，在寫中文字體。因為中文字體庫包含英文，英文字體庫不包含中文。

疑問二：行高是什么？用來干什么的？
解答：轉答案在這里，別人的博文和再看一篇會更懂，也是別人的博客
line-height用來控制文字垂直方向上的位置。

2. 字體相關屬性

字體顏色 color:red;

首行縮進 text-indent: 2em;或者 text-indent: 32px;

文本水平方向對齊 text-align:文本對齊

- 屬性值有3個：left，center，right。
- 只能靠左，居中，靠右。
- 上下移動目前可以使用line-height.

text-decoration:文本修飾

underline 下劃線

line-through 刪除線

overline 上劃線

none 無

字間距:letter-spacing:10px;

詞間距:word-spacing:10px;

字間距+詞間距:
letter-spacing:10px;和word-spacing:10px;共同使用

強制換行：word-break:break-all;
由于中文會強制換行，但是因為英文和數字不會強制換行。

英文和數字不會自動換行


   
   
   
       
       Title
       
   
   
      
          dhfudhfuhuhjfuihbhbjfhvjfhjgjhjrhufwefeejdsdkj11111
      
      
          dhfudhfuhuhjfuihbhbjfhvjfhjgjhjrhufwefeejdsdkj11111

強制不換行：white-space：nowrap；
點擊查看強制不換行

注意：詞間距的使用

eg:
1.我愛學習
2.我愛學習

對這兩個寫樣式詞間距的樣式。只有2起作用。因為瀏覽器無法自動識別那些是詞，給了空格才知道。

查看詞間距使用效果

詞間距和字間距同時使用時，注意實際效果：
eg：我愛學習。設置字間距為20px，詞間距為50px。
實際效果為：
我-20px-空格-20px-50px-愛

詞間距和字間距共同使用的效果





    
    Title
    



我愛學習

我 愛 學 習

我 愛 學 習

GPU云服務器云服務器云服務器那些事 css字體庫 css 服務器字體 css3服務器端字體

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52129.html

css基礎—字體那些事

摘要：因為網頁中可能存在中英文，中英文的字體樣式不同。要首先寫英文字體，在寫中文字體。上下移動目前可以使用文本修飾下劃線刪除線上劃線無字間距詞間距字間距詞間距和共同使用強制換行由于中文會強制換行，但是因為英文和數字不會強制換行。 css基礎—字體那些事 1. 首先講字的大小樣式等字體大小 font-size: 40px; 文字字體 font-family: 宋體,Arial; 文字樣式...

Youngs 2019-08-30 14:21 評論0 收藏0
關于CSS Reset 那些事（四）之構架CSS基礎樣式庫

摘要：現在回到我們這一章節的標題，將它做下補充關于那些事四之基于構架基礎樣式庫基礎庫構思為什么要做基礎庫我上一章節的末尾拋出了幾個問題假設你要做一個游戲單頁面，網頁上并不存在表單內容，那么你就要移除一些冗余的代碼，開始自定義樣式來滿足自己的需求。前言先來回顧一下前幾章節，我們都說了哪些內容： CSS Reset 歷史與 Normalize.css 介紹 Normalize.css...

mj 2019-08-28 18:13 評論0 收藏0
關于CSS Reset 那些事（四）之構架CSS基礎樣式庫

摘要：現在回到我們這一章節的標題，將它做下補充關于那些事四之基于構架基礎樣式庫基礎庫構思為什么要做基礎庫我上一章節的末尾拋出了幾個問題假設你要做一個游戲單頁面，網頁上并不存在表單內容，那么你就要移除一些冗余的代碼，開始自定義樣式來滿足自己的需求。前言先來回顧一下前幾章節，我們都說了哪些內容： CSS Reset 歷史與 Normalize.css 介紹 Normalize.css...

Yu_Huang 2019-08-01 14:48 評論0 收藏0