CSS 字體術語

時間  2019-11-22
標籤 css 字體 術語 欄目 CSS 简体版
原文   原文鏈接

字體有些術語須要瞭解。html

襯線字體

襯線字體指的是有襯線的字體，又稱爲有襯線體、襯線字、曲線描邊字，俗稱白體字。編程

襯線指的是字形筆畫末端的裝飾細節部分。瀏覽器

襯線字體便於閱讀，一般用於長篇文本。字體

常見的襯線字體有：spa

Lucida Bright, Lucida Fax, Palatino, "Palatino Linotype", Palladio, "URW Palladio", serifcode

無襯線字體

與襯線字體相對的，沒有襯線的稱爲無襯線體、無描邊字，俗稱黑體字。orm

在小文本中，無襯線體閱讀會更清晰。htm

常見的無襯線字體有：ip

 "Open Sans", "Fira Sans", "Lucida Sans", "Lucida Sans Unicode", "Trebuchet MS", "Liberation Sans", "Nimbus Sans L", sans-serifci

等寬字體

等寬字體（英語：Monospaced Font）是指字符寬度相同的計算機字體。與此相對，字符寬度不盡相同的計算機字體稱爲比例字體。

一般用於顯示代碼。

常見的等寬字體有：

"Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace

手寫體

手寫體又稱書寫體，港澳粵語稱爲潦草，是每一個人用手書寫的字體，用意在於加快書寫的速度，而對少數筆畫的簡寫或連寫。每一個人的手寫體因人而異。

手寫體包括：用刻字的篆書、毛筆書寫的隸書、楷書及草書、鋼筆字等等，現時也發明了一些手寫的藝術字體。同時中國大陸亦以簡化字所用的字形做爲手寫體，以區別印刷體的字形。

常見的手寫體有：

"Brush Script MT", "Brush Script Std", "Lucida Calligraphy", "Lucida Handwriting", "Apple Chancery", cursive.

虛幻字體

虛幻字體一般做爲裝飾性字體使用，常常用於標題。不適合長篇幅的文本。

粗細

字體的粗細能夠起到強調的做用，還能影響空白區域的大小，及頁面上的對比狀況。

粗細有如下狀況：

100 - 淡體 Thin ( Hairline )
200 - 特細 Extra-light ( ultra-light )
300 - 細體 Light
350 - 次細 Demi-Light
400 - 標準 Regular ( normal / book / plain )
500 - 適中 Medium
600 - 次粗 Demi-bold / semi-bold
700 - 粗體 Bold
800 - 特粗 Extra-bold / extra
900 - 濃體 Black ( Heavy )
950 - 特濃 Extra-black ( Ultra-black )

樣式

樣式有正常的和傾斜的。

其中傾斜的分爲：斜體和僞斜體

傾斜（slope / slanted style）的字體稱爲斜體（italic type）及僞斜體（oblique type）。

樣式有如下種類：

  • nomarl
  • italic
  • oblique

伸縮

伸縮是從字體的寬度上來解釋的。

在壓縮中，字體會更窄，間距更小。

在伸縮中，字體會更寬，間距更大。

伸縮有如下種類：

  • compressed
  • condensed
  • narrow
  • normal/regular
  • extended
  • expanded

font-size

能夠改變字體的大小字體大小。它的單位有px，em和百分比。

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >font-size</ title >
     < style >
         p{
             font-size:48px;
         }
     </ style >
</ head >
< body >
< h1 >利永貞網</ h1 >
< h2 >學編程，上利永貞網</ h2 >
< p >study hard, improve every day</ p >
</ body >
</ html >

字體單位

像素

Web瀏覽器的默認文本大小爲16px。

百分比

百分比以父元素中文本大小做爲參照來改變當前元素中的文本大小。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >百分比</ title >
     < style >
         p{
             font-size:300%;
         }
     </ style >
</ head >
< body >
< h1 >利永貞網</ h1 >
< h2 >學編程，上利永貞網</ h2 >
< p >study hard, improve every day</ p >
</ body >
</ html >

EM值

em值以父元素中文本大小做爲參照來改變當前元素中的文本大小。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >EM</ title >
     < style >
         p{
             font-size:3em;
         }
     </ style >
</ head >
< body >
< h1 >利永貞網</ h1 >
< h2 >學編程，上利永貞網</ h2 >
< p >study hard, improve every day</ p >
</ body >
</ html >
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程