常言道网页设计的好坏,95%取决于字体的排版。尽管现在抖音、小视频和游戏的盛行,其占据了我们大部分的业余时间,但是还是有大部分人在网络上进行阅读,比如查阅资料,阅读小说、看新闻、知识学习之类。

舒适的阅读体验,让人感觉到愉悦和舒适, 自然人们就更愿意花时间在网站上停留。在介绍关于 CSS 字体的内容部分之前,我们有必要先了解一些关于字体的基础知识。

一、通用字体族

常用的字体族有五种,分别是sans-serif (无衬线体)、serif (衬线体)、monospace (等宽体)、cursive (手写体)和fantasy (幻想体)。

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

衬线体指的是在文字笔画的端点上所加的装饰线条,因为sans 在法语中代表「无」,所以sans-serif 也就是无衬线体,与衬线字体相反,无衬线体完全抛弃装饰衬线,只剩下主干,造型简明有力,更具现代感,很适用于标题或广告,下图可以清楚地看出,红色凸出来的部分就是衬线。

2、等宽体monospace

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

3、手写体cursive、幻想体fantasy

手写体和幻想体其实有点像,手写体就像是毛笔或钢笔写出来的感觉,这种字体尝试模仿人的书写笔迹,通常,这种字体在笔画末端有较大的修饰,比衬线字体更加华丽,以中文来说预设的手写体通常就是标楷体,而幻想体就是在手写之外,更多了一些装饰或纹路在字体上,大多数的中文预设不支持幻想体,如果设置了,也会自动使用衬线体或无衬线体取代。

二、Windows 和 Mac 系统都支持的英文字体

下面罗列的英文字体通常在我们的电脑中预设都有安装,不论是Mac还是Windows都通用,支持度都在90% 以上,使用起来不会有问题。

1、无衬线体sans-serif

Arial、Arial Black、Arial Narrow、Charcoal、Geneva、Impact、Trebuchet MS、Tahoma、Verdana

2、衬线体serif:

Georgia、Times New Roman、Times

3、手写体cursive

Comic Sans MS

4、等宽体monospace

Courier New

5、幻想体Fantasy

Copperplate、Papyrus

三、常用的中文字体

英文字体因为字母少,所以预设的字体种类也比较多,中文字就不同了,一款中文字的字数远大于英文,所以在跨平台的显示也会有所不同,这也是在制作网页常见的困扰( 在Mac 设计得很好看,到Windows 就走样了),以下列出常用的中文字体名称,部分浏览器使用上可以用中文,但是为了保险起见,建议大家最好是使用英文名称或是中英文一起使用。

1、Windows系统

  • 微软雅黑(Microsoft YaHei)

  • 微软正黑体( Microsoft JhengHei )

  • 新细明体( PMingLiU )

  • 标楷体( DFKai-SB )

2、Mac 系统

  • 苹方( PingFang )

  • 黑体( STHeiti )

  • 楷体( STKaiti )

  • 俪黑Pro ( LiHei Pro )

  • 俪宋Pro ( LiSong Pro )

四、font-family 用法简介

使用font-family很简单,只需要设定family-name (字体名称)和generic-family (通用字体),font-family可以设定一种字体或多种不同的字体,每种字体间用半形逗号「,」隔开,当浏览器载入网页样式时,会从左边第一个字体开始判断,如果没有对应的字体,就直接采用下一种字体,如果到最后都没有可用的字体,就采用电脑预设字体,这时就可以通过generic-family来指定哪种预设字体。

举例来说,下面这行CSS,会先找第一种字体,若不支持或没有该字体,则采用第二种字体,依此类推,最后使用通用字,从下方例子亦可以看到,字体名称时不用加上双引号,但如果你的字体名称中间空格,就一定要加上双引号。

五、 常用的字体属性简介(CSS1、CSS2部分)

以下内容,为CSS排版字体常用到的CSS属性,我先暂且简单罗列,帮助大家进行回顾,对于重点的部分我会在稍后的文章里进行介绍。

1、color

用来指定文字的颜色。

p { color: #993;}

2、text-align

控制文本的对齐方式,有 left,center,right,或 justify。justify 为两端对齐的意思。

h1 { text-align: center;}

3、line-height

行高(line-height)是指文本行基线间的垂直距离。基线(base line)并不是汉字文字的下端沿,而是英文字母“x”的下端沿。下图中两条红线之间的距离就是行高,上行的底线和下一行顶线之间的距离就是行距,而同一行顶线和底线之间的距离是font-size。line-height=行距+font-size

p { line-height: 1.6;}

4、letter-spacing

控制字母之间的空格间隔,常用于标题元素。

h1 { letter-spacing: 0.8em;}

5、word-spacing

控制单词之间的间隔。通常应用于标题元素。

h2 { word-spacing: 2em;}

6、text-indent

段落第一行文本缩进。我们在读比较正式的期刊或报纸时,段落的首行一般都会空两个字,在CSS排版里,我们就用这个属性进行控制。

h2 + p { text-indent: 2em;}

7、text-decoration

文本装饰属性,我们可以使用underline,overline,line-through,和none 这些属性值进行修饰文本,比如下划线,上划线、中间删线等

h3 { text-decoration: underline;}

8、font-style

文本的字形属性,其用法十分简单,有 normal(正常)、italic(斜体)、oblique(倾斜体)这几种属性值。

h4 { font-style: italic;}

9、font-weight

字重。用来精确设置文本的粗细,可以在指定的数值范围内进行设定(100到900; 在100~400是正常的,700是粗体; 100是细体),或通过关键词:bold,bolder,或lighter 进行设置。(h1~h4 为bold,不要用font-weight替代H标签进行使用)

h1 { font-weight: 100;}

10、text-transform

此属性用来设置文本的大小写,默认值为none,大小形式与源文档保持一致,除了这个还有其它属性值:uppercase(大写), lowercase(小写)和 capitalize(各单词首字母大写).

11、font-variant

字体变形,在CSS3这个属性的值很多,但是在CSS1和CSS2的标准里,只有两个值:nomal 和 small-caps。small-caps是用于针对英文字母的,意思是小型大写,大小跟小写字母一样,样式是大写。常用于英文的标题和段落的第一行。

<style>

h1 {

font-variant: small-caps;}

h1 code {font-variant:normal}

</style>

<h1> The Use of <code>font-variant</code> On the Web</h1>

小节

今天的内容就给大家分享到这里,感谢大家的阅读,在接下来的文章里,我将会给大家继续分享字体相关知识,比如font-face、可变字体、书写模式的相关内容,敬请期待...

专注分享当下最实用的前端技术。关注前端达人,与达人一起学习进步!

长按关注"前端达人"

「css基础」关于字体相关的基础知识(一)相关推荐

  1. [css] 举例说明跟字体相关的属性有哪些

    [css] 举例说明跟字体相关的属性有哪些 font-size:字体大小 font-weight:字体粗细 font-family:字体类型 color:字体颜色 等等 个人简介 我是歌谣,欢迎和大家 ...

  2. 「造轮子」一个文件上传靶场知识总结记录

    https://www.sqlsec.com/2020/10/upload.html#toc-heading-1 或者 https://xz.aliyun.com/t/8435 直接使用别人的靶场总感 ...

  3. 「CSS畅想」何以解忧,美食足矣,用技术给好友开发了一个零食盲盒小游戏

    灵感来源 天气冷了,办公室零食准备起来.最近一直忙着工作,有点忽视了好友.看着网友分享的零食图片,我头顶的灵感之光亮了. 正所谓,何以解忧,美食足矣.我准备给好友写一个零食盲盒的小游戏,能看不能吃的那 ...

  4. 「 Unity 3D」是什么?零基础如何快速入门?

    一句话说明下Unity是什么,Unity是一个开发游戏,主要用于手机游戏开发的引擎,什么是引擎,引擎就是工具的意思. 零基础想自学从哪开始?一般我们学习unity3d游戏开发是要先从C++开始学起,如 ...

  5. 「Masked Autoencoders」MAE算法相关及后续工作整理

    参考链接:https://zhuanlan.zhihu.com/p/518608011 (MAE, Kaiming He et al.)由于其从丰富的未标记数据中学习有用表示的能力而重新引起了人们的兴 ...

  6. canvas换图时候会闪烁_基于Canvas实现的高斯模糊(上)「JS篇」

    作者:iNahoo 转发链接:https://mp.weixin.qq.com/s/5TxPjznpEBku_ybSMBdnfw 目录 基于Canvas实现的高斯模糊(上)「JS篇」本篇 基于Canv ...

  7. node 压缩图片_推荐10个常用的图片处理小帮手(下)「值得收藏」

    作者: semlinker 转发链接:https://mp.weixin.qq.com/s/i3ynTtPJOECoAYfqHFoo3Q 前言 本文给小伙伴们隆重介绍用于图片处理的十个 「" ...

  8. dreamweaver 正则表达式为属性值加上双引号_「前端篇」不再为正则烦恼

    作者:李一二 转发链接:https://mp.weixin.qq.com/s/PmzEbyFQ8FynIlXuUL0H-g 前言 有不少朋友都为写正则而头疼,不过笔者早已不为正则而烦恼了.本文分享一些 ...

  9. await原理 js_「速围」Node.js V14.3.0 发布支持顶级 Await 和 REPL 增强功能

    本周,Nodejs v14.3.0 发布.这个版本包括添加顶级 Await.REPL 增强等功能. REPL 增强 通过自动补全改进对 REPL 的预览支持,例如,下图中当输入 process.ver ...

最新文章

  1. 10 大方法,让您的客服中心提供更出色的服务
  2. ssl1615-Frogger【图论,最小生成树,并查集】
  3. 用C语言实现SGF格式围棋棋谱解析器
  4. 【洛谷 P3304】[SDOI2013]直径(树的直径)
  5. 吴恩达深度学习4.4练习_Convolutional Neural Networks_Art Generation with Neural Style Transfer
  6. python3安装步骤-超详细的小白python3.X安装教程|Python安装
  7. docker学习笔记-6.容器关联,容器网络
  8. Js 日期选择,可以的一个页面中重复使用本JS日历,兼容IE及火狐等主流浏览器,而且界面简洁、美观,操作体验也不错。...
  9. ios 测试证书配置
  10. 只要你足够好——写给理想受挫的人们
  11. Python-docx实战:同事要我帮忙补写178份日报!别吧
  12. w ndows10支持微信吗,windows10系统怎样安装微信客户端
  13. OpenGL中的平移旋转缩放
  14. CleanMyMacX4.15好用吗?CleanMyMac X2023安全吗?
  15. 操作系统:磁盘调度算法FCFS算法(c语言)
  16. Windows批处理编写
  17. Python操作word基础
  18. imageMagick漏洞
  19. JVC摄像机mp4视频丢失恢复方法
  20. GHOST使用教程图解

热门文章

  1. 开发用的nginx转发后端接口
  2. 复杂美科技多项区块链技术产品被纳入《2021-2022区块链产业图谱》区块链蓝皮书
  3. Moonraker:1靶机入侵
  4. Linux查看本机服务器端口占用情况
  5. TOEFL-Speak-课堂笔记
  6. 全能扫地机器人的想法
  7. manjaro文件不是一个有效的图表主题_看板图怎么画?快速制作商务大气的看板图表...
  8. kconfig常用语法,入门必看
  9. 独家 | 手把手教你用scrapy制作一个小程序 !(附代码)
  10. python 登陆淘宝_如何用 Python 自动登录淘宝并保存登录信息?