zoukankan      html  css  js  c++  java
  • CSS 字体术语

    字体有些术语需要了解。

    衬线字体

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

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

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

    常见的衬线字体有:

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

    无衬线字体

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

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

    常见的无衬线字体有:

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

    等宽字体

    等宽字体(英语: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>
  • 相关阅读:
    JAVA编写的一个简单的Socket实现的HTTP响应服务器
    IPTV 质量评价方法已经不适用于 OTT TV 质量评价
    AAC规格(LC,HE,HEv2)及性能对比
    洛谷 P1572 计算分数
    洛谷 P2128 赤壁之战
    洛谷 P2818 天使的起誓
    洛谷 P3914 染色计数
    洛谷 P1193 洛谷团队训练VS传统团队训练
    洛谷 P1318 积水面积
    洛谷 P1061 Jam的计数法
  • 原文地址:https://www.cnblogs.com/lsyw/p/10577340.html
Copyright © 2011-2022 走看看