CSS3中的字体及相关属性详解

2025-06-13 04:50

本文主要是介绍CSS3中的字体及相关属性详解,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

《CSS3中的字体及相关属性详解》:本文主要介绍了CSS3中的字体及相关属性,详细内容请阅读本文,希望能对你有所帮助...

字体

网页字体的三个来源:

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

字体相关6属性:

font-famijsly

fopythonnt-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,其他类别字体,奇形怪状。

CSS3中的字体及相关属性详解

字体大小

h2 { font-size:18px }

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

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

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

字体样式

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

CSS3中的字体及相关属性详解

字体粗细

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

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

常用bold和normal.

CSS3中的字体及相关属性详解

字体变化,慎用

值: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(2http://www.chinasem.cn) {
    font: bold italic small-caps 2em sans-serif;
}

CSS3中的字体及相关属性详解

到此这篇关于CSS3中的字体详解的文章就介绍到这了,更多相关css3字体内容请搜索China编程(www.chinasem.cn)以前的文章或继续浏览下面的相关文章,希望大家以后多多支持编程China编程(www.chinasem.cn)!

这篇关于CSS3中的字体及相关属性详解的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1155036

相关文章

SQL Server 中的 WITH (NOLOCK) 示例详解

《SQLServer中的WITH(NOLOCK)示例详解》SQLServer中的WITH(NOLOCK)是一种表提示,等同于READUNCOMMITTED隔离级别,允许查询在不获取共享锁的情... 目录SQL Server 中的 WITH (NOLOCK) 详解一、WITH (NOLOCK) 的本质二、工作

springboot自定义注解RateLimiter限流注解技术文档详解

《springboot自定义注解RateLimiter限流注解技术文档详解》文章介绍了限流技术的概念、作用及实现方式,通过SpringAOP拦截方法、缓存存储计数器,结合注解、枚举、异常类等核心组件,... 目录什么是限流系统架构核心组件详解1. 限流注解 (@RateLimiter)2. 限流类型枚举 (

Java Thread中join方法使用举例详解

《JavaThread中join方法使用举例详解》JavaThread中join()方法主要是让调用改方法的thread完成run方法里面的东西后,在执行join()方法后面的代码,这篇文章主要介绍... 目录前言1.join()方法的定义和作用2.join()方法的三个重载版本3.join()方法的工作原

Spring AI使用tool Calling和MCP的示例详解

《SpringAI使用toolCalling和MCP的示例详解》SpringAI1.0.0.M6引入ToolCalling与MCP协议,提升AI与工具交互的扩展性与标准化,支持信息检索、行动执行等... 目录深入探索 Spring AI聊天接口示例Function CallingMCPSTDIOSSE结束语

C语言进阶(预处理命令详解)

《C语言进阶(预处理命令详解)》文章讲解了宏定义规范、头文件包含方式及条件编译应用,强调带参宏需加括号避免计算错误,头文件应声明函数原型以便主函数调用,条件编译通过宏定义控制代码编译,适用于测试与模块... 目录1.宏定义1.1不带参宏1.2带参宏2.头文件的包含2.1头文件中的内容2.2工程结构3.条件编

PyTorch中的词嵌入层(nn.Embedding)详解与实战应用示例

《PyTorch中的词嵌入层(nn.Embedding)详解与实战应用示例》词嵌入解决NLP维度灾难,捕捉语义关系,PyTorch的nn.Embedding模块提供灵活实现,支持参数配置、预训练及变长... 目录一、词嵌入(Word Embedding)简介为什么需要词嵌入?二、PyTorch中的nn.Em

Python Web框架Flask、Streamlit、FastAPI示例详解

《PythonWeb框架Flask、Streamlit、FastAPI示例详解》本文对比分析了Flask、Streamlit和FastAPI三大PythonWeb框架:Flask轻量灵活适合传统应用... 目录概述Flask详解Flask简介安装和基础配置核心概念路由和视图模板系统数据库集成实际示例Stre

Spring Bean初始化及@PostConstruc执行顺序示例详解

《SpringBean初始化及@PostConstruc执行顺序示例详解》本文给大家介绍SpringBean初始化及@PostConstruc执行顺序,本文通过实例代码给大家介绍的非常详细,对大家的... 目录1. Bean初始化执行顺序2. 成员变量初始化顺序2.1 普通Java类(非Spring环境)(

Java Spring的依赖注入理解及@Autowired用法示例详解

《JavaSpring的依赖注入理解及@Autowired用法示例详解》文章介绍了Spring依赖注入(DI)的概念、三种实现方式(构造器、Setter、字段注入),区分了@Autowired(注入... 目录一、什么是依赖注入(DI)?1. 定义2. 举个例子二、依赖注入的几种方式1. 构造器注入(Con

SpringBoot 异常处理/自定义格式校验的问题实例详解

《SpringBoot异常处理/自定义格式校验的问题实例详解》文章探讨SpringBoot中自定义注解校验问题,区分参数级与类级约束触发的异常类型,建议通过@RestControllerAdvice... 目录1. 问题简要描述2. 异常触发1) 参数级别约束2) 类级别约束3. 异常处理1) 字段级别约束