• 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>
  • 相关阅读:
    Tree Restoration Gym
    Game HDU
    Codeforces Gym 191033 E. Explosion Exploit (记忆化搜索+状压)
    listview去掉条目间的分割线
    listview设置条目点击的时候不变色(让状态选择器不起作用)
    url拼凑示例(具体拼凑规则由服务器定)
    格式化一个文件的大小(size),或者说是格式化一个app的大小(size)
    ratingbar设置不可调节星星数量
    listview的条目(item)如何做出卡片效果
    安卓网络权限异常
  • 原文地址:https://www.cnblogs.com/lsyw/p/10577340.html
Copyright © 2020-2023  润新知