CSS权威指南(五)字体

news/2024/10/23 5:41:00/

文章目录

  • 1.字体族
  • 2.@font-face
  • 3.字重(font-weight)
  • 4.字号(font-size)
  • 5.字形(font-style)
  • 6.字体拉伸(font-stretch)
  • 7.字距(font-kerning)
  • 8.字体变形(font-variant)
  • 9.字体匹配机制

1.字体族

CSS定义了五种通用的字体族。

  • 衬线字体:字形宽度各异,而且又衬线。因为字体不同字符的尺寸不同,因此宽度有差异。
  • 无衬线字体:字体中的字形宽度各异,而且无衬线。
  • 等宽字体:字形宽度一样。一般用于表示编程代码或者表格数据。这种字体各个字符在横向上所占的空间使用一样的。
  • 草书字体:模仿人类笔迹或手写体。通常在笔划末端有较大的花饰,而且比衬线字体华丽。
  • 奇幻字体:没有统一的特征。

   理论上,任何一款字体都可以归为一类字体族。浏览器通常会将不能识别字体族的字体归为奇幻字体族。

(1)使用字体族

   使用字体族需要使用font-family属性

2.@font-face

@font-face的作用主要是可以使用自定义的字体。

(1)必要的描述符

   @font-family有两个必要的描述符,分别是font-family和src,前者用于指定该自定义字体的名称,后者指定该字体的资源路径。

ps.这里的src适用于同源策略

(2)其他的字体描述符image-20230106194317177

(3)限制字符范围

   使用unicode-range可以指定自定义字体可以应用的字符范围。

3.字重(font-weight)

  • 初始值:normal
  • 可选值:norma、bold、bolder、lighter、100~900

   通常来说,字重越大,字体越粗、越黑。不同的数字字重值对应的字体的不同粗细,如果一个字体拥有全部的100900字形,那么100900就都能和对应字体对应上。其中,通常400对应normal、700对应bold。如果500的字重未分配,那么和400一样。如果300未分配,将其对应于比400细的那个变体,如果没有,就和400一样。如果600未分配,将其对应于比500粗的那个变体,如果没有,和500保持一致。700~900同样也是这么分配的。

4.字号(font-size)

   指定字体大小。

5.字形(font-style)

  • normal 常规
  • italic 斜体
  • oblique 倾斜体

6.字体拉伸(font-stretch)

   设置字体的瘦体和胖体。

7.字距(font-kerning)

   设置字体的字距。

8.字体变形(font-variant)

   设置字体连写、小号大写字母、小数的表示方式、数字之间的间距、零有没有管穿线等样式。

9.字体匹配机制

(1)用户代理创建或访问字体属性数据库

(2)用户代理把应用了字体属性的元素摘出来,构建显示元素所需的字体属性列表

(3)匹配字体时,先看font-stretch属性

(4)然后看font-style属性

(5)接下来匹配font-weight

(6)然后处理font-size

(7)如果第二步没有找到匹配的字体,用户代理在同一个字体族中找到替代字体,然后回到第二步

(8)假设找到一个基本匹配的字体,但是字体没有显示元素所需的全部信息,比如字体缺少版权符号,那么用户代理将回到第3步,搜索替代字体,再执行第二步

(9)最后,如果找不到匹配的字体,而且所有替代字体都试过了,用户代理将指定字体族中的默认字体,力争正确显示元素


http://www.ppmy.cn/news/10122.html

相关文章

实战攻防之紫队视角下的实战攻防演习组织

声明 本文是学习实战攻防之紫队视角下的实战攻防演习组织. 下载地址 http://github5.com/view/55010而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们 什么是紫队 紫队,一般是指网络实战攻防演习中的组织方。 紫队是在实战攻防演习中&#…

软件测试~测试分类

目录 1.按照是否查看代码划分 ① 黑盒测试(Black-box Testing) ② 白盒测试(White-box Testing) ③ 灰盒测试(Gray-Box Testing) 2.按照开发阶段划分 ① 单元测试(Unit Testing) ② 集成测试(Integration Testing) ③ 系统测试(System Testing) ④ 验收测试(Acceptance…

select、poll、epoll的简要对比

select select的几大缺点: (1)每次调用select,都需要把fd集合从用户态拷贝到内核态,这个开销在fd很多时会很大 (2)同时每次调用select都需要在内核遍历传递进来的所有fd,这个开销在…

续集来了丨UI自动化测试(二):带视频,实在RPA高效进行web项目UI自动化测试

一、什么是web项目ui自动化测试? 通过测试工具模拟人为操控浏览器,使软件按照测试人员的预定计划自动执行测试的一种方式,可以完成许多手工测试无法完成或者不易实现的繁琐工作。 正确使用自动化测试,可以更全面的对软件进行测试…

[C语言]初步的来了解一下指针(多图详解)

目录 1.指针是什么 2.指针类型 2.1指针类型的意义(-整数) 2.2指针的解引用 3.野指针 3.1野指针出现的情况 3.2 如何规避野指针 4.指针运算 4.1指针-整数 4.2指针-(减)指针 5.二级指针 1.指针是什么 指针是内存中最小的单元编号,也就是地址。指针还可以是一种…

【Linux】make/Makefile的使用

本文目录 背景简介 使用方法 为什么执行的指令是make和make clean呢? gcc如何判断文件是否需要重新执行? 背景简介 一个工程中的源文件不计数,其按类型、功能、模块分别放在若干个目录中,makefifile定义了一系列的规则来指定…

学习笔记6:字符串库函数(下)

目录 一. strstr模拟实现 二. strtok模拟实现 三.关于strerror和perror的说明 一. strstr模拟实现 库函数strstr函数首部:char * strstr ( const char *str1, const char * str2); 函数的功能是在str1指向的主字符串中寻找子串str2,并且返回主字符串中…

【经典面试题】

TC经典面试题1.赛马问题 WY经典面试题2.:烧香问题 砝码称重问题 有36匹马,6个跑道,在没有计时器的情况下,至少需要赛马多少次,才能比出前三名? 答案:至少需要比较8次。 解题思路: 先把36匹…