css系列 font文字

2021-09-29 21:17:25 字數 3805 閱讀 2350

可以定義多個字型,系統會依次查詢,比如'courier new'字型不存在將使用courier以此類推。

要使用通用字型,比如你電腦裡有後盾人宋體在你電腦可以正常顯示,但不保證在其他使用者電腦可以正常,因為他們可能沒有這個字型。

font-family: 'courier new', courier, monospace;
自定義字型

字型

格式.otf

opentype

.woff

woff

.ttf

truetype

.eot

embedded-opentype

不建議使用中文字型,因為檔案太大且大部分是商業字型。

字重指字的粗細定義。取值範圍normal | bold | bolder | lighter | 100 ~900

400對應normal,700對應bold,一般情況下使用 bold (加粗)或 normal(正常) 較多。

...

字重改變預設字重

字型大小用於控制字元的顯示大小,包括xx-small | x-small | small | meidum | large | x-large | xx-large

百分數

百分數是子元素相對于父元素的大小,如父元素是20px,子元素設定為 200%即為你元素的兩倍大小。

...

相對弗雷字型大小百分比

emem單位等同於百分數單位。

...

相對于父模擬例

remrem是相對於根html的比例。r即":root"。我們做響應式時就會使用em和rem。後面css-響應式會詳細講解。

...

相對於根html

字串顏色可以使用如red | green等字元顏色宣告

color:red;
使用十六進製制網頁顏色

color:#ddffde
如果顏色字元相同如#dddddd可以簡寫為#ddd使用rgb顏色

color:rgb(38, 149, 162);
透明顏色透明色從0~1間,表示透明到不透明

color:rgba(38, 149, 162,.2);
div
字元的傾斜樣式控制

...

斜體清除斜體

可以使用font一次將字元樣式定義,但要注意必須存在以下幾點:

span 

...組合使用

小號大寫字母

span 

...daxie小號字型

字母大小寫轉換

新增隱藏刪除線

下劃線刪除線

上劃線引數順序為:顏色,水平偏移,垂直偏移,模糊度。

使用white-space控制文字空白顯示。

選項說明

pre保留文字中的所有空白,類似使用 pre 標籤,(注意pre不會自動換行)

nowrap

禁止文字換行,清除空白,清除換行

pre-wrap

保留空白,保留換行符(會自動換行

pre-line

空白合併,保留換行符(會自動換行

h2 

...

pre-wrap效果: 

pre效果:不換行產生滾動條

溢位文字容器後換行處理:

...溢位新增...,需要將overflow 設定在 text-overflow 前面。(僅適用於單行)

h2 

...

多行文字溢位顯示省略號:(僅適用於webkit核心)

多行文字溢位,顯示省略號;多行文字溢位,顯示省略號;多行文字溢位,顯示省略號;

多行文字溢位,顯示省略號;多行文字溢位,顯示省略號;多行文字溢位,顯示省略號;

多行文字溢位,顯示省略號;多行文字溢位,顯示省略號;多行文字溢位,顯示省略號;

控制元素部的文字、進行縮排操作

當我們寫文章,或是一大段文字的時候,我們會在每個段落的開始縮排2個字元。

當我們寫文章,或是一大段文字的時候,我們會在每個段落的開始縮排2個字元。

使用left|right|center對文字進行對齊操作

h2 

...

使用單位對齊可以使用具體數值設定對齊的位置。

h2>span
單詞與字元間距使用word-spacingletter-spacing控制單詞與字元間距。

word-spacing效果:

letter-spacing效果:

h2
模式

說明horizontal-tb

水平方向自上而下的書寫方式

vertical-rl

垂直方向自右而左的書寫方式

vertical-lr

垂直方向內內容從上到下,水平方向從左到右

div 

...鋤禾日當午,汗滴禾下土;誰知盤中餐,粒粒皆辛苦。

css基礎知識筆記 font文字排版

font文字排版 1.font family設定字型 yahei 2.font size設定字型大小 10px 3.font weight設定粗體 bold 4.font style設定文字傾斜 normal 預設正常 italic oblique 傾斜 4.text decoration設定字型裝...

CSS系列 CSS文字樣式

在css中字型通過font family屬性來設定。font family verdana,arial,helvetica,sans serif 上面的字型設定告訴瀏覽器首先在訪問者的計算機中尋找verdana字型。如果該訪問者的計算機中沒有verdana字型,則尋找arial字型。若沒有arial...

pygame系列 font遊戲字型

在pygame遊戲開發中,乙個友好的ui中,漂亮的字型是少不了的 今天就給大夥帶來有關pygame中字型的一些介紹說明 首先我們得判斷一下我們的pygame中有沒有font這個模組 1 if not pygame.font print warning,fonts disabled 如果有的話才可以進...