网页常用字体&CSS 字体设置详细介绍

文章目录
  1. 1、用 CSS font-family 定义网页字体
  2. 2、中文网网页常用字体
  3. 3、网页如何使用外部字体
  4. 4、CSS 字体常见样式美化

最近在折腾 WordPress,前天晚上因为网络问题导致主题设置全丢了,包括预设的 font-family 等属性,于是开启了新一轮折腾之旅。对于我一个纯纯小白来说,需要搞明白几点:一是如何定义网页的字体,二是网页字体一般有哪些,三是字体样式美化。以下内容整理自网络,不是教程仅是我个人简要的笔记,有不对的地方请指出。

字体,是网页排版中最重要的元素之一,本篇文章将会针对 CSS 的字体属性比如font-family、font-size、font-style等进行详细介绍,希望帮助大家在跨平台浏览或是做些特殊排版时,能更轻松的使用网页字体,能让网页内容更清楚更精彩。

1、用 CSS font-family 定义网页字体

CSS 属性 font-family 允许你通过给定一个有先后顺序的,由字体名或者字体族名组成的列表来为选定的元素设置字体,字体之间用英文逗号隔开,当浏览器载入网页样式时,会从左边第一个字体开始判断,如果没有对应的字体,就直接采用下一种字体,如果到最后都没有可用的字体就采用电脑默认字体。

比如本页正在使用的 font-family 为:font-family:'Arial Narrow', 'Microsoft YaHei', sans-serif;,浏览器首先将所有字符尽可能使用 Arial Narrow 字体显示,因为它不含中文字符,于是浏览器继续往下套用,最终在本站呈现的是英文显示为 Arial Narrow 字体,中文显示为雅黑体的一个效果。这是我按照下文常用中文网页字体表一一尝试最后确定的,我个人感觉这样排版稍微好看一点。

CSS font-family 属性标准用法应为:

body{
  font-family:第一种字体, 第二种字体, "第三种 字体", "通用字体";
} 

其中如果你打算用的字体名称中有空格,须要用英文引号包起来。字体排列最末的通用字体共有五种,分别是 sans-serif ( 无衬线体)、serif ( 衬线体)、monospace ( 等宽体)、cursive ( 手写体) 和 fantasy ( 幻想体) ,这个参数其实可以不设置,主要是中文字体对此支持较差,让浏览器调用本地默认字体即可。

衬线体 serif 、无衬线体 sans-serif

衬线 serif 指的是字形笔画末端的装饰部分,因为 sans 在法语中代表「无」,所以 sans-serif 也就是无衬线体,与衬线字体相反,无衬线体完全抛弃装饰衬线,只剩下主干,造型简明有力,更具现代感,很适用于标题或广告。

等宽体 monospace

等宽字体表示所有的字母、数字都是同样的宽度,对于中文而言,每个字在设计上大多都是等宽,但英文就不同了,例如说 W 和 i 的宽度就差很多,这也造成有时在排版上的一些困扰,如果指定 monospace,就会自动套用系统预设的等宽字体。目前在本站上的代码<code>I Love You</code>类就使用了等宽字体,感受感受。

手写体 cursive、幻想体 fantasy

手写体和幻想体其实有点像,顾名思义手写体有点儿像钢笔写出来的感觉,以中文来说预设的手写体通常就是标楷体。而幻想体就是在手写之外,还多了一些额外的修饰,不过大多数的中文字体都不支持幻想体,因此这个参数一般使用衬线体或无衬线体代替。

2、中文网网页常用字体

因为 Win7 及以前版本的停服,Windows 巨大的占有率,现在应该是微软雅黑一统天下了吧?不过这事儿还是应该分中文字符和英文字符来区分看。

Windows 和 Mac 都支持的英文字体

排除系统额外安装和网页自定义引入外,以下字体都是默认内置在了系统中,可以放心地使用。

无衬线字体 sans-serif

Arial Kevin's Space ABCWLI abcwli 012345 &#@%${}~
Arial Black Kevin's Space ABCWLI abcwli 012345 &#@%${}~
Arial Narrow Kevin's Space ABCWLI abcwli 012345 &#@%${}~
Charcoal Kevin's Space ABCWLI abcwli 012345 &#@%${}~
Impact Kevin's Space ABCWLI abcwli 012345 &#@%${}~
Tahoma Kevin's Space ABCWLI abcwli 012345 &#@%${}~
Trebuchet MS Kevin's Space ABCWLI abcwli 012345 &#@%${}~
Verdana Kevin's Space ABCWLI abcwli 012345 &#@%${}~

衬线字体 serif

Georgia Kevin's Space ABCWLI abcwli 012345 &#@%${}~
Palatino Kevin's Space ABCWLI abcwli 012345 &#@%${}~
Times New Roman Kevin's Space ABCWLI abcwli 012345 &#@%${}~
Times Kevin's Space ABCWLI abcwli 012345 &#@%${}~

手写字体 cursive

Comic Sans MS Kevin's Space ABCWLI abcwli 012345 &#@%${}~

等宽字体 monospace

Courier New Kevin's Space ABCWLI abcwli 012345 &#@%${}~

幻想字体 Fantasy

Copperplate Kevin's Space ABCWLI abcwli 012345 &#@%${}~
Papyrus Kevin's Space ABCWLI abcwli 012345 &#@%${}~

简体区常用中文字符一览

英文字体因为字母少,所以默认字体和第三方字体比较多,中文字就不同了,一款中文字的字数远大于英文,所以在跨平台的显示也会有所不同,这也是在制作网页常见的困扰,以下列出我见的比较多的中文字体,欢迎评论区补充。

微软雅黑 欢迎光临牧羊人博客 ABCWLI abcwli 012345 &#@%${}~
微软雅黑 Light 欢迎光临牧羊人博客 ABCWLI abcwli 012345 &#@%${}~
微软正黑 欢迎光临牧羊人博客 ABCWLI abcwli 012345 &#@%${}~
宋体 欢迎光临牧羊人博客 ABCWLI abcwli 012345 &#@%${}~
新宋体 欢迎光临牧羊人博客 ABCWLI abcwli 012345 &#@%${}~
仿宋 欢迎光临牧羊人博客 ABCWLI abcwli 012345 &#@%${}~
仿宋 _GB2312 欢迎光临牧羊人博客 ABCWLI abcwli 012345 &#@%${}~
华文仿宋 欢迎光临牧羊人博客 ABCWLI abcwli 012345 &#@%${}~
苹方 欢迎光临牧羊人博客 ABCWLI abcwli 012345 &#@%${}~
黑体 欢迎光临牧羊人博客 ABCWLI abcwli 012345 &#@%${}~
华文黑体 欢迎光临牧羊人博客 ABCWLI abcwli 012345 &#@%${}~
楷体 欢迎光临牧羊人博客 ABCWLI abcwli 012345 &#@%${}~
楷体 _GB2312 欢迎光临牧羊人博客 ABCWLI abcwli 012345 &#@%${}~
华文楷体 欢迎光临牧羊人博客 ABCWLI abcwli 012345 &#@%${}~
新明细体 欢迎光临牧羊人博客 ABCWLI abcwli 012345 &#@%${}~

以上是常见的网页字体,如果上述表格中部分所列没有正常显示的话,那么可能是你系统中不包含该字体……可以考虑本地安装一个,或者由网页引入。

3、网页如何使用外部字体

如果预设的字体都无法满足精心设计的版面,这时就需要使用外部的字体,要使用外部字体有下列三种方式:

使用 CSS link 加载外部字体

这个做法和一般载入 CSS 的方式一样,只是把 CSS 的超连结换成字体的超连结,就能够使用该字体。像最近博友全比较火的霞鹜文楷屏幕阅读版字体族就可以通过如下方式引入到网页,然后定义字体为font-family: "LXGW WenKai Screen", sans-serif;即可,网页效果可参考旅行漫记

<link rel="stylesheet" href="https://npm.elemecdn.com/lxgw-wenkai-screen-webfont@1.1.0/style.css">

使用 CSS @import 加载字体

运用 CSS 的@import,将要载入的外部字体超链接,写在 CSS 内,载入后就能使用该字体。

<style>
  @import url('外部字体超链接');
</style>

使用@font-face 加载外部字体

@font-face是使用 font-family 很重要的概念,它可以让我们使用本地的字体文件(如 woff、ttf、SVG、EOT),或和线上字体互相搭配使用,亦可一并指定粗体、斜体等样式,还能通过利用unicode-range的方法,指定字元的特定字体,让网页的设计更具备灵活性…那样就显得比较复杂,超过了本文扫盲的范畴了。

4、CSS 字体常见样式美化

网页字体样式设置一般有这么几个参数:font-size、font-weight、font-style、text-transform、letter-spacing,他们分别定义文字大小、子重、字体形态、英文字母大小写转换和字符间距。

这几个属性按字面意思其实是比较容易理解的,实在不行查 W3C,按下不表,这里着重记录下:font-size 定义字符大小的使用方法。

比较难以理解的就是 font-size 具有很多个不同的属性值,比附 pt/px/em/large 等等,方便记忆可以把这些属性分为“网页”和“印刷”两大类,咱们这里只说网页,网页又可分为“单位”和“名称”两类。我个人完全外行,所以常常会简单粗暴的用绝对值,也就是PX定义字体大小,但如果理解了这些属性的意义和用法,往往事半功倍,这篇文章有详细介绍

font-size 属性值(名称)

medium:预设值,等于 16px ( h4 预设值)
xx-small:medium 的 0.6 倍( h6 预设值)
x-small:medium 的 0.75 倍
small:medium 的 0.8 倍( h5 预设值,W3C 定义为 0.89,实测约为 0.8 )
large:medium 的 1.1 倍( h3 预设值,W3C 定义为 1.2,实测约为 1.1 )
x-large:medium 的 1.5 倍( h2 预设值)
xx-large:medium 的 2 倍( h1 预设值)
smaller:约为父层的 80%
larger:约为父层的 120%

font-size 属性值(单位)

px:绝对单位,代表萤幕中每个“点”( pixel )。
em:相对单位,每个子元素透过“倍数”乘以父元素的 px 值。
rem:相对单位,每个元素透过“倍数”乘以根元素的 px 值。
%:相对单位,每个子元素透过“百分比”乘以父元素的 px 值。
1200 790 Kevin's
「网页常用字体&CSS 字体设置详细介绍」有 22 条评论
  • […] 最近一段时间一直断断续续在折腾这个小站,这里感谢一众博友给提的建议和帮助!前几天S大哥又提到说现目前这这版界面的英文字体太窄了,建议换个大气一点的……我一琢磨好像是偏窄,看着有点小气且累眼睛。本站已经很重了,所以我并不打算引入额外的网络字体,仅是从网页常用字体中去挨个换了一一对比,本来已经换上了衬线体 Times,但看了半天觉得还是略显杂乱,故又给撤下了。 […]

  • 天一生水
    03/29/2024 at 20:52 回复

    手机端访问,这个页面的列出的部分字体没有效果。不知是本身手机端显示就如此,还是的针对手机端的字体设置不对。

    • Kevin
      03/30/2024 at 09:10 回复

      手机本身没有内置部分字体,故以默认字体加载显示

      • 天一生水
        03/30/2024 at 09:55 回复

        是哦,我想当然了。以为都是在线字体。

        • Kevin
          03/30/2024 at 10:32 回复

          我例句的都是最最常用的本地字体~不过有些是MAC,大部分是Windows,至于手机。。可能大部分都是默认字体在显示吧

  • Dabenshi
    03/28/2024 at 11:25 回复

    超喜欢“霞鹜文楷”,文中参考效果不是“霞鹜文楷” 哈哈

    • Kevin
      03/28/2024 at 12:23 回复

      你在用的字体就是xwwk吧~~

  • S
    03/27/2024 at 21:42 回复

    另外啥时候把日字型指针去掉啊,难受。
    另另外留言框昵称邮件页面还是不能记住cookie。

    • Kevin
      03/27/2024 at 22:04 回复

      听你的,我暂时把鼠标指针给去掉了…~

      记不住cookie这事儿该怎么弄?我看网上的教程,难道是加JS???

      • S
        03/27/2024 at 22:11 回复

        加个js不费事。我发你邮箱了。
        另外广告能不能也去掉,每次刷新都被遮蔽了。

        • Kevin
          03/27/2024 at 22:36 回复

          谢谢,已改,我来试试效果哈哈哈

          • S
            03/28/2024 at 21:27 回复

            测试。

  • S
    03/27/2024 at 21:40 回复

    也曾一直折腾这些。现在也就用用googlefont的英文字体和lxgwwenkai两款字体了。其它都默认。

    • Kevin
      04/07/2024 at 16:48 回复

      大哥评价一下我现在的整体Ui,提提建议

      • S
        04/07/2024 at 17:38 回复

        整体还行,有细节方面我个人有些建议:
        1、Cookie是记住了,但昵称、电邮跟默认的.comment-form textarea里面“您的昵称”、“电子邮件”等标签重影。
        2、英文字太窄了,建议换个大气点的,宽一点的,比如www.googlefonts.cn里头的。
        3、向上箭头grve-bottom-right-area的加速度不舒适。不如在js里面设置成没有加速度或加速度更快一些。
        4、头像什么时候换成cravatar.cn的。
        5、「 ..... 」这一段里面的红色圈不太喜欢。无用且拖慢速度。

        • S
          04/07/2024 at 17:39 回复

          是这。《div id="grve-indicator" class="grve-style-1" style="display: none; transform: translate3d(808px, 414px, 0px) scale(0, 0); opacity: 0;"》

          • Kevin
            04/07/2024 at 21:31 回复

            好嘞感谢您的建议!其中第一个是官方bug正在修复中,第二个我考虑一下
            第三个这个应该是你的缓存,目前这个速度已经调的很快了.
            第四个我始终觉得这个这个地址很慢,所以如果还是换成了七刘,
            第五个好像我已经在正文里面关闭了,
            但是在归档和页面底部还有这个东西

  • obaby
    03/27/2024 at 18:14 回复

    评论的字体感觉有点太挤了

    • Kevin
      03/27/2024 at 19:16 回复

      正在优化中,评论框这部分现在改了一点点,看起来应该好一些了

  • Jeffer.Z
    03/27/2024 at 17:05 回复

    我之前用的好多主题都是Googlefont,感觉很慢,后来都拿插件localfont拉回本地加载。但是感觉使用字体也就那么多个,文章编辑器倒是一堆字体选择,每次我都默认,就是怕这些字体需要加载,拖慢页面速度。如果都是系统自带字体,那好多了,远程调用比较坑....

    • Kevin
      03/27/2024 at 17:33 回复

      其实还好,用于webscreen 的字体文件包一般不大,而且大多数都有公共CDN,速度很快的,,

发表评论

请输入关键词…