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

相关文章

MySQL数据库双机热备的配置方法详解

《MySQL数据库双机热备的配置方法详解》在企业级应用中,数据库的高可用性和数据的安全性是至关重要的,MySQL作为最流行的开源关系型数据库管理系统之一,提供了多种方式来实现高可用性,其中双机热备(M... 目录1. 环境准备1.1 安装mysql1.2 配置MySQL1.2.1 主服务器配置1.2.2 从

Linux kill正在执行的后台任务 kill进程组使用详解

《Linuxkill正在执行的后台任务kill进程组使用详解》文章介绍了两个脚本的功能和区别,以及执行这些脚本时遇到的进程管理问题,通过查看进程树、使用`kill`命令和`lsof`命令,分析了子... 目录零. 用到的命令一. 待执行的脚本二. 执行含子进程的脚本,并kill2.1 进程查看2.2 遇到的

MyBatis常用XML语法详解

《MyBatis常用XML语法详解》文章介绍了MyBatis常用XML语法,包括结果映射、查询语句、插入语句、更新语句、删除语句、动态SQL标签以及ehcache.xml文件的使用,感兴趣的朋友跟随小... 目录1、定义结果映射2、查询语句3、插入语句4、更新语句5、删除语句6、动态 SQL 标签7、ehc

详解SpringBoot+Ehcache使用示例

《详解SpringBoot+Ehcache使用示例》本文介绍了SpringBoot中配置Ehcache、自定义get/set方式,并实际使用缓存的过程,文中通过示例代码介绍的非常详细,对大家的学习或者... 目录摘要概念内存与磁盘持久化存储:配置灵活性:编码示例引入依赖:配置ehcache.XML文件:配置

从基础到高级详解Go语言中错误处理的实践指南

《从基础到高级详解Go语言中错误处理的实践指南》Go语言采用了一种独特而明确的错误处理哲学,与其他主流编程语言形成鲜明对比,本文将为大家详细介绍Go语言中错误处理详细方法,希望对大家有所帮助... 目录1 Go 错误处理哲学与核心机制1.1 错误接口设计1.2 错误与异常的区别2 错误创建与检查2.1 基础

k8s按需创建PV和使用PVC详解

《k8s按需创建PV和使用PVC详解》Kubernetes中,PV和PVC用于管理持久存储,StorageClass实现动态PV分配,PVC声明存储需求并绑定PV,通过kubectl验证状态,注意回收... 目录1.按需创建 PV(使用 StorageClass)创建 StorageClass2.创建 PV

vite搭建vue3项目的搭建步骤

《vite搭建vue3项目的搭建步骤》本文主要介绍了vite搭建vue3项目的搭建步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录1.确保Nodejs环境2.使用vite-cli工具3.进入项目安装依赖1.确保Nodejs环境

Python版本信息获取方法详解与实战

《Python版本信息获取方法详解与实战》在Python开发中,获取Python版本号是调试、兼容性检查和版本控制的重要基础操作,本文详细介绍了如何使用sys和platform模块获取Python的主... 目录1. python版本号获取基础2. 使用sys模块获取版本信息2.1 sys模块概述2.1.1

Nginx搭建前端本地预览环境的完整步骤教学

《Nginx搭建前端本地预览环境的完整步骤教学》这篇文章主要为大家详细介绍了Nginx搭建前端本地预览环境的完整步骤教学,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录项目目录结构核心配置文件:nginx.conf脚本化操作:nginx.shnpm 脚本集成总结:对前端的意义很多

一文详解Python如何开发游戏

《一文详解Python如何开发游戏》Python是一种非常流行的编程语言,也可以用来开发游戏模组,:本文主要介绍Python如何开发游戏的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下... 目录一、python简介二、Python 开发 2D 游戏的优劣势优势缺点三、Python 开发 3D