CSS 字体术语

时间：2022-04-06 21:53:29

字体有些术语需要了解。

衬线字体

衬线字体指的是有衬线的字体，又称为有衬线体、衬线字、曲线描边字，俗称白体字。

衬线指的是字形笔画末端的装饰细节部分。

CSS 字体术语

衬线字体便于阅读，通常用于长篇文本。

常见的衬线字体有：

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

无衬线字体

与衬线字体相对的，没有衬线的称为无衬线体、无描边字，俗称黑体字。

CSS 字体术语

在小文本中，无衬线体阅读会更清晰。

常见的无衬线字体有：

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

等宽字体

等宽字体（英语：Monospaced Font）是指字符宽度相同的计算机字体。与此相对，字符宽度不尽相同的计算机字体称为比例字体。

CSS 字体术语

通常用于显示代码。

常见的等宽字体有：

"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>

CSS 字体术语的更多相关文章

  1. CSS字体属性大全

    文章转自:http://www.10wy.net/Article/CSS/CSS_list_8.html查看更多更专业性的文章请到:网页设计网 CSS字体属性 字体名称属性(font-family) ...

  2. css字体样式&lpar;Font Style&rpar;&comma;属性

    css字体样式(Font Style),属性   css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者 ...

  3. Css字体中英文对照表

    css字体中文.英文.Unicode名对照表 另外注意:繁体中文字体名,在简体中文系统中是不能被识别的. 中文名 英文名 Unicode Unicode 2 Mac OS 华文细黑 STHeiti L ...

  4. css字体设置

    css字体设置 .selector{ font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,S ...

  5. 2&period;css字体单位

    这期简单说说css字体单位 字体单位有三种:px.em.rem 任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: 1em=16px. % 百分比 in 英寸 cm 厘米 mm 毫米 e ...

  6. Css - 字体图标

    Css - 字体图标 字体格式 ttf.otf.woff.svg.eot 现在流行将图标做成矢量的字体格式的文档,很多用户在放大页面的时候页面上的普通图片格式的图标就会变得模糊不清,这种字体图标在网页 ...

  7. CSS 字体&lpar;font&rpar;实例

    CSS 字体(font)实例CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母).CSS 字体系列在 CSS 中,有两种不同类型的字体系列名称: 通用字体系列 - 拥 ...

  8. css字体中英文对照表（转）

     在css文件中,我们常看到有些字体名称变成了乱码,这是由于网页开发者将中文字体的名字直接写成了中文,而css文件本身没有声明字符编码方式,查看时就出现了乱码.为了避免这种乱码状况出现,可以将css文 ...

  9. css 字体样式设置

    css字体样式(Font Style),属性 时间:2014-05-08 21:49 来源:我爱学习网 | 作者:我爱学习网 | 本文已影响 68353 人   css字体样式(Font Style) ...

随机推荐

  1. 两种方法设置disabled属性

    //两种方法设置disabled属性 $('#fileup').attr("disabled",true); $('#fileup').attr("disabled&qu ...

  2. redhat openshift 跳转

    网址: https://openshift.redhat.com/ OpenShift免费套餐的限制是:最多15PV/s,有3个512MB内存的应用,月流量在50K以下. 可以绑米,可惜的是,需要代理 ...

  3. TCP拥塞控制算法 优缺点 适用环境 性能分析

    [摘要]对多种TCP拥塞控制算法进行简要说明,指出它们的优缺点.以及它们的适用环境. [关键字]TCP拥塞控制算法 优点    缺点   适用环境公平性 公平性 公平性是在发生拥塞时各源端(或同一源端 ...

  4. 51nod 1117 聪明的木匠 &lpar;哈夫曼树&rpar;

    题目:传送门. 题意:中文题. 题解:就是构造一颗哈夫曼树,数据结构里的知识. #include <iostream> #include <cstdio> #include & ...

  5. 【转】在sqlserver下增加MYSQL的链接服务器，实现分布式数据库开发第一步

    首先要在SQLserver上服务器上这装ODBC对mysql的支持,我下载了mysql-connector-odbc-5.1.5-win32.rar,安装后在ODBC中有了DRIVER={MySQL ...

  6. 微信公众平台网页获取用户OpenID方法

    下面我们一起来看看关于微信公众平台网页获取用户OpenID方法,有需要了解的朋友可以一起来看看吧．用户点击微信自定义菜单view类型按钮后,微信客户端将会打开开发者在按钮中填写的url值 (即网页链接 ...

  7. AngularJS学习小结

    在刚学习AngularJS的时候觉得好像挺简单的,看见老师每次用很少的代码就做出用源生代码或者JQuery要用多行代码才做出的效果的时候觉得好像思路很简单,也很好写就写出来了,但是等到我们自己做的时候 ...

  8. JavaScript 要点（十六）RegExp 对象

    RegExp:是正则表达式(regular expression)的简写. RegExp 对象 正则表达式是描述字符模式的对象. 正则表达式用于对字符串模式匹配及检索替换,是对字符串执行模式匹配的强大 ...

  9. c语言数组不同初始化方式的结果

    第一种初始化方式: #include <stdio.h> int main() { int numbers[5]={12,14}; for (int i=0; i<5; i++) { ...

  10. OpenCV2学习笔记02：MSVC2013搭建OpenCV开发环境

    我这里编译的库是通过手动编译的.只是需要注意的是,手动编译一般会产生大量的文件,差不多7个多G的样子,实在是有点浪费硬盘存储呀,其实我们可以删除掉没有用的东西.因为我们在编译的时候指定了一个目录比如我 ...

相关文章