CSS3中的字体详解

news2024/9/30 23:10:42

字体

网页字体的三个来源:

  • 用户机器上安装的字体,放心使用。
  • 保存在第三方网站上的字体,例如Typekit和Google,可以link标签链接到你的页面上。
  • 保存在你自己Web服务器上的字体,可以用@font-face规则随网页一起发送到浏览器。

 

字体相关6属性:

font-family

font-size

font-style

font-weight

font-variant

font(简写属性)

难道字体和文本不是一回事?

当然不是。请听我解释。

字体是“文字的不同体式”或者“字的形体结构”。对于英文而言,每种字体都是由一组具

有独特样式的字母、数字和符号组成的。根据外观,字体可以分为不同的类别(font

collection),包括衬线字体(serif)、无衬线字体(sans-serif)和等宽字(monospace)。

每一类字体可以分成不同的字体族(font family),比如Times 和Helvetica。而字体族中

又可以包含不同的字型(font face),反映了相应字体族基本设计的不同变化,例如Times

Roman、Times Bold、Helvetica Condensed 和Bodoni italic。

文本就是一组字或字符,比如章标题、段落正文等等,跟使用什么字体无关。

CSS 为字体和文本分别定义了属性。字体属性主要描述一类字体的大小和外观。比如,使用

什么字体族(是Times,还是Helvitica),多大字号,粗体还是斜体。文本属性描述对文本的

处理方式。比如,行高或者字符间距多大,有没有下划线和缩进。

这就是我对字体和文本之间区别的认识。如果你想让文字加粗,或者变斜体,可以设定字体属性。而行高和缩进这种只有对文本块(比如标题和段落)才有意义的样式,则要使用文本属性设定。

字体族

例如:h2{ font-family:times, serif; }

通用字体:

  • serif,衬线字体,每个笔画末端都会有一些装饰线。
  • sans-serif,无衬线字体,字符笔画末端没有装饰线。
  • monospace,等宽字体,每个字符宽度相等,也叫代码体。
  • cursive,草书体或者手写体。
  • fantasy,其他类别字体,奇形怪状。

字体大小

h2 { font-size:18px }

大小单位:px,em,百分比。

默认字体大小为16px,也就是1em=16px.

单独讲rem单位:根em, 相对于HTML根元素,一改所有的字体大小都会改。

字体样式

值:italic(斜体)、oblique(斜体)、normal(正常字体,为了消除特殊样式)

字体粗细

值:100,200······900,或者关键字 lighter、normal、bold和bolder。

示例:a { font-weight: bold; }

常用bold和normal.

字体变化,慎用

值:small-caps(小型大写字母)、normal

示例(块引用):blockquote { font-variant(字体变形):small-caps; }

经常将small-caps用于::first-line伪元素。

简写字体属性

规则一:必须声明font-size和font-family的值。

规则二:所有值必须按如下顺序声明,font-weight,font-style,font-variant不分先后,然后是font-size,最后font-family.

p:nth-child(2) {
    font: bold italic small-caps 2em sans-serif;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2087519.html

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

相关文章

【文献及模型、制图分享】传统村多功能发展特征识别、类型划分与差异化引导——以安徽黟县44个传统村为例(多指标综合法及耦合协调模型

文献介绍 揭示多功能发展特征、划定多功能协同发展类型是传统村落传承保护与活化利用的现实需要,是传统村落保护发展研究的重要议题。以黟县44个中国传统村落为研究对象,采用多指标综合法及耦合协调模型,科学测度传统村落多功能发展水平及协…

【赵渝强老师】MongoDB的存储引擎

存储引擎(Storage Engine)是MongoDB的核心组件,它负责管理数据如何存储在硬盘(Disk)和内存(Memory)上。从MongoDB 3.2 版本开始,MongoDB支持多种类型的数据存储引擎。 视频讲解如下&…

“JavaScript里的多线程“WebWorker

"JavaScript里的多线程"WebWorker 引言 简要介绍主题: WebWorker 是一种在 Web 开发中用来解决 JavaScript 单线程限制的重要技术。通过 WebWorker,可以将一些复杂或耗时的任务放到后台线程中执行,从而避免阻塞主线程,…

Java 7.1 - 理论 算法 协议

什么是 CAP 理论? C:Consistency 一致性 A:Availability 可用性 P:Partition 分区容错性 对于理论计算机科学,CAP 定理指出,对于一个分布式系统而言,CAP 中的三个只能同时满足两个。 分区容…

从算法到硬件实现:《基于FPGA的数字信号处理》(可下载)

数字信号处理是现代电子系统中不可或缺的核心。FPGA是实现复杂DSP算法的理想平台。《基于FPGA的数字信号处理(第2版)》由资深工程师高亚军编著,是一本深入探讨FPGA在数字信号处理领域应用的专业书籍。 本书以Xilinx新一代28nm工艺芯片7系列FP…

设计模式 -- 组合模式(Composite Pattern)

1 问题引出 编写程序展示一个学校院系结构:需求是这样,要在一个页面中展示出学校的院系组成,一个学校有多个学院, 一个学院有多个系。如图: 2 基本介绍 组合模式(Composite Pattern)&#xff0c…

Musetalk-Stream: 未来数字人的智能语音交互革命“

实时交互流式数字人,实现音视频同步对话。基本可以达到商用效果 ernerf效果musetalk效果wav2lip效果 Features ⦁ 支持多种数字人模型: ernerf、musetalk、wav2lip ⦁ 支持声音克隆 ⦁ 支持数字人说话被打断 ⦁ 支持全身视频拼接 ⦁ 支持rtmp和webr…

C语言中的预处理器字符串化与拼接操作符:底层原理及实现细节

引言 在C语言中,预处理器是一个重要的工具,它在编译前对源代码进行处理,从而实现了诸如条件编译、宏定义等功能。本文将深入探讨两种预处理器操作符:# 和 ##,它们分别用于字符串化和拼接标识符。 字符串化操作符 # …

1、Java简介+DOS命令+java的编译运行(字节码/机器码、JRE/JVM/JDK的区别)+一个简单的Java程序

​ Java类型: JavaSE 标准版:以前称为J2SE,主要用来开发桌面应用程序或简单的服务器应用程序。JavaEE 企业版:建立在 Java SE 的基础上,包含了支持企业级应用程序开发和部署的标准和规范(如Servlet、Jsp、…

自建 git 服务器

所有老板(至少 99%)都一样,想花一分钱办两分钱的事,想招十块钱的人干二十块钱的事……我表示理解(A Pei ~~ 既想马儿跑得快,又想马儿不吃草) 在老板眼中,我恰好是那个性价比最高的人…

AI赚钱成功案例|像素级拆解一键生成提示词 文生图 图生视频

本文背景 之前弄了个诗词转画面大师,就是你给个句子,它就能给你画面提示词,接着用 AI 绘图软件能生成很棒的画面,再把图片弄成视频,最后能出个不错的作品。 最近看到那些漫剪大师的作品,配的歌好听&#xf…

设计模式结构型模式之适配器模式

结构型模式之适配器模式 一、概述和使用场景1、概述2、使用场景:3、主要分类 二、 代码示例1、类适配器模式2、接口适配器3、对象适配器 四、总结1、适配器模式2、适配器模式的优点3、适配器模式的缺点 一、概述和使用场景 1、概述 适配器模式是一种结构型设计模式…

会声会影分离的音频怎么导出 会声会影分离音频后如何合并 视频剪辑制作教程软件

出色的音频编辑,可以显著提升剪辑作品的质量。一款优秀的视频剪辑软件,必定拥有强大的音频编辑能力。以会声会影视频剪辑软件为例,它不仅具备丰富的音频编辑功能,还允许用户自定义音频导出参数。有关会声会影分离的音频怎么导出&a…

深入学习SQL优化的第五天(最后一天)

子查询 1321 餐 馆 营 业 额 变 化 增 长 1321. 餐馆营业额变化增长 表: Customer------------------------ | Column Name | Type | ------------------------ | customer_id | int | | name | varchar | | visited_on | date | | amount …

【曾哥分享-1】云 WAF 绕过

幕布链接:【曾哥分享-1】云 WAF 绕过 - 幕布

【DSP+FPGA】基于Virtex-7 FPGA + C6678 DSP的高性能实时信号处理平台

DSP FPGA 协同处理架构板载 1 个TMS320C6678 多核DSP处理节点板载 1 片 XC7VX690T FPGA处理节点板载 1 个FMC 接口板载4路SFP光纤接口FPGA 与 DSP 之间采用高速Rapid IO互联 基于Virtex-7 FPGA的高性能实时信号处理平台,该平台采用1片TI的KeyStone系列多核DSP TMS3…

【DSP+FPGA】基于2 个TMS320C6678+ XC7VX690T FPGA 的6U VPX 总线架构的高性能实时信号处理平台

6U VPX架构,符合VITA46规范板载 2 个TMS320C6678 多核DSP处理节点板载 1 片 XC7VX690T FPGA处理节点板载 2 个FMC 接口背板之间具有 4 路 x4 高速 GTH 互联,支持RapidIO、PCI ExpressFPGA 与 DSP 之间采用高速Rapid IO互联 基于6U VPX架构的高性能实时信…

变分自编码器(Variational Autoencoder, VAE):深入理解与应用

变分自编码器(Variational Autoencoder, VAE):深入理解与应用 在深度学习的广阔领域中,生成模型一直是研究的热点之一。其中,VAE(变分自编码器)作为AE(自编码器)的一种扩…

Java | Leetcode题解之第383题赎金信

题目: 题解: class Solution {public boolean canConstruct(String ransomNote, String magazine) {if (ransomNote.length() > magazine.length()) {return false;}int[] cnt new int[26];for (char c : magazine.toCharArray()) {cnt[c - a];}for…

华为集合通信库开源了!HCCL开源链接、架构、拓扑算法、常用接口

激动啊!我们华为HCCL终于开源了! 视频分享在这: 华为集合通信库开源了!HCCL开源链接、拓扑算法、常用接口_哔哩哔哩_bilibili 一、HCCL相关链接 源码位置(需注册华为账号才可下载) cann-hccl: cann-hc…