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

相关文章

Redis 的 SUBSCRIBE命令详解

《Redis的SUBSCRIBE命令详解》Redis的SUBSCRIBE命令用于订阅一个或多个频道,以便接收发送到这些频道的消息,本文给大家介绍Redis的SUBSCRIBE命令,感兴趣的朋友跟随... 目录基本语法工作原理示例消息格式相关命令python 示例Redis 的 SUBSCRIBE 命令用于订

Vue和React受控组件的区别小结

《Vue和React受控组件的区别小结》本文主要介绍了Vue和React受控组件的区别小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录背景React 的实现vue3 的实现写法一:直接修改事件参数写法二:通过ref引用 DOMVu

使用Python批量将.ncm格式的音频文件转换为.mp3格式的实战详解

《使用Python批量将.ncm格式的音频文件转换为.mp3格式的实战详解》本文详细介绍了如何使用Python通过ncmdump工具批量将.ncm音频转换为.mp3的步骤,包括安装、配置ffmpeg环... 目录1. 前言2. 安装 ncmdump3. 实现 .ncm 转 .mp34. 执行过程5. 执行结

Python中 try / except / else / finally 异常处理方法详解

《Python中try/except/else/finally异常处理方法详解》:本文主要介绍Python中try/except/else/finally异常处理方法的相关资料,涵... 目录1. 基本结构2. 各部分的作用tryexceptelsefinally3. 执行流程总结4. 常见用法(1)多个e

Java实现将HTML文件与字符串转换为图片

《Java实现将HTML文件与字符串转换为图片》在Java开发中,我们经常会遇到将HTML内容转换为图片的需求,本文小编就来和大家详细讲讲如何使用FreeSpire.DocforJava库来实现这一功... 目录前言核心实现:html 转图片完整代码场景 1:转换本地 HTML 文件为图片场景 2:转换 H

C#使用Spire.Doc for .NET实现HTML转Word的高效方案

《C#使用Spire.Docfor.NET实现HTML转Word的高效方案》在Web开发中,HTML内容的生成与处理是高频需求,然而,当用户需要将HTML页面或动态生成的HTML字符串转换为Wor... 目录引言一、html转Word的典型场景与挑战二、用 Spire.Doc 实现 HTML 转 Word1

Vue3绑定props默认值问题

《Vue3绑定props默认值问题》使用Vue3的defineProps配合TypeScript的interface定义props类型,并通过withDefaults设置默认值,使组件能安全访问传入的... 目录前言步骤步骤1:使用 defineProps 定义 Props步骤2:设置默认值总结前言使用T

SpringBoot日志级别与日志分组详解

《SpringBoot日志级别与日志分组详解》文章介绍了日志级别(ALL至OFF)及其作用,说明SpringBoot默认日志级别为INFO,可通过application.properties调整全局或... 目录日志级别1、级别内容2、调整日志级别调整默认日志级别调整指定类的日志级别项目开发过程中,利用日志

Java中的抽象类与abstract 关键字使用详解

《Java中的抽象类与abstract关键字使用详解》:本文主要介绍Java中的抽象类与abstract关键字使用详解,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧... 目录一、抽象类的概念二、使用 abstract2.1 修饰类 => 抽象类2.2 修饰方法 => 抽象方法,没有

MySQL8 密码强度评估与配置详解

《MySQL8密码强度评估与配置详解》MySQL8默认启用密码强度插件,实施MEDIUM策略(长度8、含数字/字母/特殊字符),支持动态调整与配置文件设置,推荐使用STRONG策略并定期更新密码以提... 目录一、mysql 8 密码强度评估机制1.核心插件:validate_password2.密码策略级