CSS权威指南(五)字体

news2024/12/23 11:39:45

文章目录

  • 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.coloradmin.cn/o/144647.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Python 办公自动化,全网最全整理来了!拒绝无效率加班!

大家好,今天给大家分享一篇 Python 自动化办公干货,整整42个实战项目案例。每一个项目案例都有详细的视频讲解,是一套非常全面的Python自动化办公项目,建议大家收藏后学习,梳理不易,记得点赞支持。详细目录…

【菜菜的CV进阶之路 - 深度学习环境搭建】常用软件安装

四、安装网易云 双系统装完了,下一步当然是,休息一下,听一首歌啦~ 1、连网:只能使用wifi连,网线直连的话,还需要配置 2、安装网易云: 下载最新的Linux安装包,然后 sudo apt inst…

数据的存储(C语言)

数据类型: 要了解数据是如何存储的,我们就得先知道C语言中的数据类型 基本数据类型 基本数据类型,也就是C语言内置类型: char -> 字符型 short -> 短整型 int -> 整…

html textarea 插入字符在光标处

textarea 插入字符在光标处前言深度解析1 效果图上代码前言 深度解析 1 效果图 上代码 <!DOCUMENT><html><head> <link rel"stylesheet" href"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css&qu…

Semantic Segmentation | 评价指标代码解析

如有错误&#xff0c;恳请指出。 文章目录1. 定义解析2. 代码解析之前有记录过关于图像语义分割的相关评价指标与经典网络&#xff0c;在看PointNet的语义分割训练脚本的时候&#xff0c;图像的语义分割和点云的语义分割其实本质上是一致的。所以这里想记录一下语义分割的评价指…

MySQL下载及使用navicat连接mysql数据库(含下载地址、超具体细节、推荐数据库教程)

目录下载地址安装流程第一步&#xff1a;开始安装第二步&#xff1a;类型选择第三步&#xff1a;developer default第四步&#xff1a;execute第五步&#xff1a;服务器配置窗口第六步&#xff1a;网络类型配置窗口第七步&#xff1a;第八步&#xff1a;服务器密码设置窗口第九…

Vue全家桶 Pinia状态管理

Pinia状态管理1. Pinia和Vuex的对比2. 创建Pinia的Store3. Store 简介与使用4. Pinia核心概念State5. Pinia核心概念Getters6. Pinia核心概念ActionsPinia开始于大概2019年&#xff0c;最初是作为一个实验为Vue重新设计状态管理&#xff0c;让它用起来像组合式API&#xff0c;从…

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

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

录屏软件电脑版免费哪个好?4款免费屏幕录制软件下载

在电脑上经常能使用的录屏功能&#xff1a;录制软件的操作过程、精彩的游戏瞬间、经典的影视故事、网络教学等。许多人都在问&#xff0c;录屏软件电脑版哪个好&#xff1f;Windows平台上有很多录屏软件&#xff0c;如果对录屏需求不高的朋友&#xff0c;可以通过内置的视频软件…

08线性回归+基础优化算法

P2基础优化算法 1.最常见的优化算法——梯度下降&#xff0c;用在模型没有显示解的情况下&#xff08;线性回归有显示解&#xff0c;但是现实中很少有这样理想的情况&#xff09; 2.梯度下降的实现方法&#xff1a;沿着反梯度更新方向参数求解 解释&#xff1a; 超参数&#x…

HTTP_day03

当键入网址后&#xff0c;到网页显示&#xff0c;其间发生了什么&#xff08;下&#xff09; 掘金地址 键入 localhost ,通过 Wireshark 抓包分析&#xff0c;抓包结果如下图所示 抓包结果 我们知道 HTTP 协议是运行在 TCP/IP 基础 之上的。 浏览器 通过 HTTP 接收和发送数据…

怎么才能写出好的代码

前言这是一篇如何写好代码的水文&#xff0c;因为最近输出了不少干货&#xff0c;但是大家点赞太少&#xff0c;我越来越没有激情了&#xff0c;那就放放水啦。所以如果大家觉得我的分享对你有用&#xff0c;动动发财小手&#xff0c;赞起来吧&#xff01;虽然是一篇水文&#…

谷粒学苑项目-第一章数据库设计与项目结构-1.1

一、数据库设计 1、数据库 guli2、数据表 CREATE TABLE edu_teacher (id char(19) NOT NULL COMMENT 讲师ID,name varchar(20) NOT NULL COMMENT 讲师姓名,intro varchar(500) NOT NULL DEFAULT COMMENT 讲师简介,career varchar(500) DEFAULT NULL COMMENT 讲师资历,一句话说…

Java--经典九道练习题

文章内容 一、用户登录 二、遍历字符串 三、统计字符个数 四、拼接字符串 五、字符串反转 六、金额转换&#xff08;较难&#xff09; 七、手机号屏蔽 八、身份证号码信息查看 九、游戏骂人敏感词替换 一、用户登录 一直正确的用户名和密码&#xff0c;请用程序实现模…

获取当前进程的启动程序

本文迁移自本人网易博客&#xff0c;写于2012年3月23日&#xff0c;获取当前进程的启动程序 - lysygyy的日志 - 网易博客 (163.com)1.获取当前进程的启动程序CString sFile;GetModuleFileName(NULL, sFile.GetBuffer(), 255);2.获取文件类型3.Autocad文档交互时&#xff0c;使用…

Camera | 1.Camera基础知识

一口君最近在玩瑞芯微的板子&#xff0c;之前写了几篇基于瑞芯微的文章&#xff0c;大家可以学习一下。 《瑞芯微rk356x板子快速上手》 《Linux驱动|rtc-hym8563移植笔记》 《Linux驱动 | Linux内核 RTC时间架构》 《瑞芯微 | 摄像头ov13850移植笔记》 《rk3568 | 瑞芯微平…

图的生成树与生成森林

文章目录连通图与连通分量强连通图与强连通分量图的连通性判断生成树深度优先生成树邻接表邻接矩阵广度优先生成树邻接表邻接矩阵生成森林获取边弧的权值源代码连通图与连通分量 在无向图中, 若从顶点v到顶点w有路径存在, 则称v和w是连通的. 若图G中任意两个顶点都是连通的, 则…

动态规划--矩阵链相乘问题

明确原始问题A[1:n]&#xff1a;计算矩阵链 所需的最小乘法次数。 &#xff08;1&#xff09;是否满足最优子结构&#xff0c;问题的解是否包含子问题的优化解&#xff1f; 若计算A[1:n]的优化顺序在k处断开矩阵链&#xff0c;即A[1:n]A[1:k]A[k1:n],则在A[1:n]的优化顺序中&a…

ReFactor GNN:从消息传递角度重新审视FMs

分享嘉宾 | 陈艺虹 文稿整理 | William Knowledge Graph Completion(KGC) 知识图谱一般会有多个节点&#xff0c;包括性别、国家等各种各样的节点(也可理解为实体)&#xff0c;节点之间会有不同的关系&#xff0c;可以通过其他的一些节点预测出当前节点的其他信息。恢复这些信…

2023/1/6 Vue学习笔记-1

尝试 Vue.js 最简单的方法是使用 Hello World 例子。你可以在浏览器新标签页中打开它&#xff0c;跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件&#xff0c;然后通过如下方式引入 Vue&#xff1a; <!-- 开发环境版本&#xff0c;包含了有帮助的命令行警告 -…