CSS初级教程(字体)【第七天】

news2025/1/10 11:29:33

文章目录

  • 【1】CSS 字体
  • 【2】CSS 字体样式
  • 【3】CSS 字体大小
  • 【4】CSS 谷歌字体
  • 【5】CSS 字体属性
  • 【6】所有 CSS 字体属性

CSS上回学习链接

CSS初级教程 颜色【第一天】
CSS初级教程 背景【第二天】
CSS初级教程 边框【第三天】
CSS初级教程 边距、高度、宽度【第四天】
CSS初级教程(轮廓)【第五天】
CSS初级教程(文本)【第六天】

【1】CSS 字体

在这里插入图片描述
字体选择很重要

选择正确的字体会对网站的用户体验产生巨大影响。

正确的字体可以为您的品牌创造强有力的形象。

使用易于阅读的字体很重要。字体为您的文本增加了价值。为字体选择正确的颜色和文本大小也很重要。

通用字体族

在 CSS 中，有五个通用字体族：

`衬线字体（Serif）- 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。`
`无衬线字体（Sans-serif）- 字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。`
`等宽字体（Monospace）- 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。`
`草书字体（Cursive）- 模仿了人类的笔迹。`
`幻想字体（Fantasy）- 是装饰性/俏皮的字体。`

所有不同的字体名称都属于这五个通用字体系列之一。
Serif 和 Sans-serif 字体之间的区别

在这里插入图片描述

提示：在计算机屏幕上，无衬线字体被认为比衬线字体更易于阅读。

一些字体的例子
在这里插入图片描述

CSS font-family 属性
在 CSS 中，我们使用 font-family 属性规定文本的字体。

font-family属性应包含多个字体名称作为“后备”系统，以确保浏览器/操作系统之间的最大兼容性。请以您需要的字体开始，并以通用系列结束（如果没有其他可用字体，则让浏览器选择通用系列中的相似字体）。字体名称应以逗号分隔。

注释：如果字体名称不止一个单词，则必须用引号引起来，例如："Times New Roman"。

实例
为三个段落规定不同的字体：

<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
  font-family: "Times New Roman", Times, serif;
}

.p2 {
  font-family: Arial, Helvetica, sans-serif;
}

.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}
</style>
</head>
<body>

<h1>CSS font-family</h1>

<p>这是一个段落，以 Times New Roman 字体显示：</p>
<p class="p1">This is a paragraph, shown in the Times New Roman font.</p>
<p>这是一个段落，以 Arial 字体显示：</p>
<p class="p2">This is a paragraph, shown in the Arial font.</p>
<p>这是一个段落，以 Lucida Console 字体显示：</p>
<p class="p3">This is a paragraph, shown in the Lucida Console font.</p>

</body>
</html>

在这里插入图片描述

【2】CSS 字体样式

字体样式
font-style属性主要用于指定斜体文本。

此属性可设置三个值：

normal - 文字正常显示
italic - 文本以斜体显示
oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）

实例

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}
</style>
</head>
<body>

<p class="normal">This is a paragraph in normal style.</p>
<p class="italic">This is a paragraph in italic style.</p>
<p class="oblique">This is a paragraph in oblique style.</p>

</body>
</html>

在这里插入图片描述

字体粗细
font-weight属性指定字体的粗细：

实例

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
  font-weight: normal;
}

p.light {
  font-weight: lighter;
}

p.thick {
  font-weight: bold;
}

p.thicker {
  font-weight: 1000;
}
</style>
</head>
<body>

<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>

</body>
</html>

在这里插入图片描述

字体变体
font-variant属性指定是否以small-caps字体（小型大写字母）显示文本。

在 small-caps 字体中，所有小写字母都将转换为大写字母。但是，转换后的大写字母的字体大小小于文本中原始大写字母的字体大小。

实例

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
  font-variant: normal;
}

p.small {
  font-variant: small-caps;
}
</style>
</head>
<body>

<p class="normal">My name is Bill Gates.</p>
<p class="small">My name is Bill Gates.</p>

</body>
</html>

在这里插入图片描述

【3】CSS 字体大小

字体大小
font-size属性设置文本的大小。

在网页设计中，能够管理文本大小很重要。但是，不应使用调整字体大小来使段落看起来像标题，或是使标题看起来像段落。

请始终使用正确的 HTML 标签，例如 < h1> - < h6> 用于标题，而 < p> 仅用于段落。

font-size 值可以是绝对或相对大小。

绝对尺寸：

将文本设置为指定大小
不允许用户在所有浏览器中更改文本大小（可访问性不佳）
当输出的物理尺寸已知时，绝对尺寸很有用

相对尺寸：

设置相对于周围元素的大小
允许用户在浏览器中更改文本大小

注释：如果您没有指定字体大小，则普通文本（如段落）的默认大小为 16px（16px = 1em）。

以像素设置字体大小
使用像素设置文本大小可以完全控制文本大小：

实例

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}
</style>
</head>
<body>

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>

</body>
</html>

在这里插入图片描述

提示：如果您使用了像素，则仍然可以使用缩放工具来调整整个页面的大小。

用 em 设置字体大小
为了允许用户调整文本大小（在浏览器菜单中），许多开发人员使用 em 而不是像素。

W3C 建议使用 em 尺寸单位。

1em 等于当前字体大小。浏览器中的默认文本大小为 16px。因此，默认大小 1em 为 16px。

可以使用这个公式从像素到 em 来计算大小：pixels/16=em。

实例

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
  font-size: 1.875em; /* 30px/16=1.875em */
 }

p {
  font-size: 0.875em; /* 14px/16=0.875em */
}
</style>
</head>
<body>

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<p>这是一个段落。</p>
<p>用 em 设置字体大小允许所有主要浏览器调整文本大小。不幸的是，旧版本的 IE 仍然存在问题。在调整文本大小时，会变得比原来更大或更小。</p>

</body>
</html>

在这里插入图片描述

在上例中，em 单位的文本大小与上一个例子中的像素大小相同。但是，若使用 em 尺寸，则可以在所有浏览器中调整文本大小。

不幸的是，旧版本的 Internet Explorer 仍然存在问题。放大文本时它比应该大的尺寸更大，缩小文本时会更小。

使用百分比和 Em 的组合
实例

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-size: 100%;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 1.875em;
}

p {
  font-size: 0.875em;
}
</style>
</head>
<body>

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<p>这是一个段落。</p>
<p>以 ％ 和 em 中设置字体大小会在所有主要浏览器中显示相同的大小，并允许所有浏览器调整文本大小！</p>

</body>
</html>

在这里插入图片描述

我们的代码目前运行良好！它在所有浏览器中显示相同的文本大小，并允许所有浏览器缩放或调整文本大小！

响应式字体大小

可以使用 vw单位设置文本大小，它的意思是“视口宽度”（"viewport width"）。

这样，文本大小将遵循浏览器窗口的大小，请调整浏览器窗口的大小，以查看字体大小如何缩放：

实例

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>

<h1 style="font-size:10vw;">响应式文本</h1>

<p style="font-size:5vw;">请调整浏览器窗口的大小，以查看文本大小如何缩放。</p>

<p style="font-size:5vw;">调整文本大小时，请使用 "vw" 单位。 10vw 将尺寸设置为视口宽度的 10％。</p>

<p>视口是浏览器窗口的大小。 1vw = 视口宽度的 1％。如果视口为 50 厘米宽，则 1vw 为 0.5 厘米。</p>

</body>
</html>

在这里插入图片描述

视口（Viewport）是浏览器窗口的大小。 1vw = 视口宽度的 1％。如果视口为 50 厘米宽，则 1vw 为 0.5 厘米。

【4】CSS 谷歌字体

谷歌字体
如果您不想使用 HTML 中的任何标准字体，则可以使用 Google Fonts API 向页面添加数百种其他字体。

只需添加一个样式表链接并引用您选择的字体系列：

实例

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
  font-family: "Sofia";
  font-size: 22px;
}
</style>
</head>
<body>

<h1>Sofia Font</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

</body>
</html>

在这里插入图片描述

【5】CSS 字体属性

字体属性
为了缩短代码，也可以在一个属性中指定所有单个字体属性。

font 属性是以下属性的简写属性：

font-style
font-variant
font-weight
font-size/line-height
font-family

实例
使用简写声明设置一些字体属性：

<!DOCTYPE html>
<html>
<head>
<style>
p.a {
  font: 20px Arial, sans-serif;
}

p.b {
  font: italic bold 12px/30px Georgia, serif;
}
</style>
</head>
<body>

<h1>The font Property</h1>

<p class="a">This is a paragraph. The font size is set to 20 pixels, and the font family is Arial.</p>

<p class="b">This is a paragraph. The font is set to italic and bold, the font size is set to 12 pixels, the line height is set to 30 pixels, and the font family is Georgia.</p>

</body>
</html>

在这里插入图片描述

注意：font-size和 font-family的值是必需的。如果缺少其他值之一，则会使用其默认值。

【6】所有 CSS 字体属性

属性描述
font简写属性。在一条声明中设置所有字体属性。
font-family规定文本的字体系列（字体族）。
font-size规定文本的字体大小。
font-style规定文本的字体样式。
font-variant规定是否以小型大写字母的字体显示文本。
font-weight规定字体的粗细。

在这里插入图片描述

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

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

相关文章

ChatGPT的注册和使用教程

ChatGPT的注册和使用教程

1 简介在时下热门话题AI作画之外&#xff0c;最近一个名叫ChatGPT的聊天机器人又掀起了一股人工智能的热潮。已有无数人投入到对它的测试研究之中&#xff0c;想探清它到底无所不能到何种地步。据悉&#xff0c;已有超过百万人与机器人聊天&#xff0c;甚至导致网站一度崩溃。那…
阅读更多...
URDF与RVIZ

URDF与RVIZ

#来自赵虚左的资料&#xff0c;视频 创建功能包urdf01_rviz&#xff0c;依赖rviz xacro(比较简单使用) <launch> <!-- 设置参数 --> <param name"robot_description" textfile"$(find urdf01_rviz)/urdf/urdf/demo01_helloworld.urdf"…
阅读更多...
Docker软件安装文档

Docker软件安装文档

软件安装文档 文章目录软件安装文档虚拟机安装系统死锁问题JDK11安装Docker安装Docker-Compose安装MySQL安装MySQL8安装Docker-Compose安装MySQL8MySQL5.7安装Nacos安装Docker安装Nacos单机Docker-Compose安装Nacos集群OpenResty安装Redis安装Docker安装单机RedisDocker-Compos…
阅读更多...
【Unity3D】点选物体、框选物体、绘制外边框

【Unity3D】点选物体、框选物体、绘制外边框

1 需求描述 点选物体&#xff1a;点击物体&#xff0c;可以选中物体&#xff0c;按住 Ctrl 追加选中&#xff0c;选中的物体设置为红色。框选物体&#xff1a;拖拽鼠标&#xff0c;屏幕上会出现滑动框&#xff0c;滑动框内的物体会被选中&#xff0c;选中的物体设置为红色。绘…
阅读更多...
Vue中自定义指令是什么？有哪些应用场景？

Vue中自定义指令是什么？有哪些应用场景？

一、什么是指令 开始之前先学习一下指令系统这个词 指令系统是计算机硬件的语言系统&#xff0c;也叫机器语言&#xff0c;它是系统程序员看到的计算机的主要属性。因此指令系统表征了计算机的基本功能决定了机器所要求的能力 在vue中提供了一套为数据驱动视图更为方便的操作&…
阅读更多...
【C语言进阶】qsort函数详解以及它的模拟实现

【C语言进阶】qsort函数详解以及它的模拟实现

目录一、qsort函数介绍二、qsort函数参数介绍2.1&#xff1a;void* base2.2&#xff1a;size_t num2.3&#xff1a;size_t size2.4&#xff1a;int(* compar)(const void *,const void *)三、实际应用3.1&#xff1a;利用qsort函数对整型数组排序3.2&#xff1a;利用qsort函数对…
阅读更多...
2023年1月9日：fastadmin在列表操作列区域添加按钮及控制已有按钮显示

2023年1月9日：fastadmin在列表操作列区域添加按钮及控制已有按钮显示

列表操作列区域添加按钮 buttons: [{name: detail,title: __(详情),classname: btn btn-xs btn-primary btn-dialog,icon: fa fa-list,url: audit/detail,callback: function (data) {Layer.alert("接收到回传数据&#xff1a;" JSON.stringify(data), {title: &q…
阅读更多...
【nvivo11plus教程】01_nvivo介绍、案例与批注

【nvivo11plus教程】01_nvivo介绍、案例与批注

1、查看nvivo版本2、nvivo是如何支持质性研究的3、nvivo的项目介绍4、建立nvivo项目(1)建立项目(2)文件夹(3)新建分类(4)建立备忘录5、案例(1)建立案例(2)案例节点分类的变量设置(3)归类案例6、批注7、备忘录链接1、查看nvivo版本 2、nvivo是如何支持质性研究的 是一个迭代的过…
阅读更多...
MATLAB算法实战应用案例精讲-【数据分析】时许异常检测

MATLAB算法实战应用案例精讲-【数据分析】时许异常检测

前言 时间序列异常检测的目的就是在时间序列中寻找不符合常见规律的异常点，无论是在学术界还是工业界这都是一个非常重要的问题。企业的运维场景中有海量的运维指标数据，如果单纯依靠人力来发现并定位异常，将是十分低效的，所以如果可以开发一个智能运维系统对于异常波动自…
阅读更多...
MAC地址

MAC地址

目录MAC地址广播信道的数据链路层必须使用地址&#xff08;MAC&#xff09;IEEE 802局域网的MAC地址格式IEEE 802局域网的MAC地址发送顺序单播MAC地址举例广播MAC地址举例多播MAC地址举例MAC地址 使用点对点信道的数据链路层不需要使用地址使用广播信道的数据链路层必须使用地址…
阅读更多...
加解密与HTTPS（6）

加解密与HTTPS（6）

您好&#xff0c;我是湘王&#xff0c;这是我的CSDN博客&#xff0c;欢迎您来&#xff0c;欢迎您再来&#xff5e;随着成本的下降&#xff0c;主流网站都已经开始使用HTTPS了。但有了可信机构颁发的证书&#xff0c;网站就真的绝对安全了吗&#xff1f;以之前出现过的上大学被冒…
阅读更多...
多任务系统概述

多任务系统概述

一个例子&#xff1a; int Main(void) { TargetInit(); //初始化目标板OSInit(); //初始化操作系统 OSTaskCreate(Task0,&StackTask0[StackSizeTask0 - 1],PrioTask0); // 创建一个任务Uart_Printf("Ready to start OS\n"); OSStart(); //运行操作系统return 0…
阅读更多...
AtCoder Beginner Contest 284(A~E)

AtCoder Beginner Contest 284(A~E)

比赛名称&#xff1a;AtCoder Beginner Contest 284 比赛链接&#xff1a;AtCoder Beginner Contest 284 A - Sequence of Strings 输入若干字符串&#xff0c;再把这些字符串按输入顺序倒序输出 #include <bits/stdc.h> using namespace std; signed main() {ios::sy…
阅读更多...
年终盘点（二）丨2022计讯物联荣誉资质大盘点

年终盘点（二）丨2022计讯物联荣誉资质大盘点

峥嵘岁月&#xff0c;奋力前行。2022年&#xff0c;计讯物联积极发扬实干精神&#xff0c;聚力做强做精做专物联网产业&#xff0c;全面助力数字化转型升级&#xff0c;以硬核的实力揽获多项殊荣。 每一项荣誉的背后是计讯领导的的正确指导与全力支持&#xff0c;更是全体计讯人…
阅读更多...
综合项目 旅游网【2. 优化servlet】没有指定的js文件读不到文件 错误

综合项目 旅游网【2. 优化servlet】没有指定的js文件读不到文件 错误

优化servlet目的减少Servlet的数量&#xff0c;现在是一个功能一个Servlet&#xff0c;将其优化为一个模块一个Servlet&#xff0c;相当于在数据库中一张表对应一个Servlet&#xff0c;在Servlet中提供不同的方法&#xff0c;完成用户的请求。如何解决测试时控制台中文乱码&…
阅读更多...
VS2019+Opencv3.4+Win10配置详解

VS2019+Opencv3.4+Win10配置详解

一.下载opencv 官网&#xff1a;Releases - OpenCV 不同版本vs对应不同版本的opencv,其中高版本vs可以配置低版本vc&#xff0c;低版本不能配置高版本vc。 windows系统直接下载Windows版本就可以&#xff08;下载的文件是一个exe文件&#xff0c;运行相当于解压缩&#xff0…
阅读更多...
1143汉诺塔

1143汉诺塔

题目描述汉诺塔问题是这样的&#xff1a;有3根柱子A,B,C&#xff0c;其中A柱上有64个盘子&#xff0c;盘子大小不等&#xff0c;大的在下&#xff0c;小的在上。要求把这64个盘子从A柱移到C柱上&#xff0c;在移动过程中可以借助B柱&#xff0c;每次只允许移动一个盘子&#xf…
阅读更多...
什么是 Java 泛型？怎样使用 Java 泛型？

什么是 Java 泛型？怎样使用 Java 泛型？

目录 1、为什么使用泛型&#xff1f; 2、什么是泛型类&#xff1f;如何定义一个泛型类&#xff1f; 泛型的命名约定 3、什么是泛型方法&#xff1f;如何定义一个泛型方法&#xff1f; 4、什么是有界类型参数&#xff1f;如何定义有界类型参数&#xff1f; &#xff08;1&…
阅读更多...
Maven高级-私服

Maven高级-私服

分模块合作开发 9.2)Nexus Nexus是Sonatype公司的一款maven私服产品 下载地址&#xff1a;https://help.sonatype.com/repomanager3/download Nexus*安装、启动与配置** 启动服务器&#xff08;命令行启动&#xff09; nexus.exe /run nexus访问服务器&#xff08;默认端口…
阅读更多...
linux安装部署vsftpd

linux安装部署vsftpd

yum直接安装yum -y install vsftpd ftp 创建新用户&#xff1a;ftpd更新ftpd密码&#xff1a;echo "123456" |passwd --stdin ftpd创建ftp目录&#xff1a;mkdir -p /home/ftpd/test授权&#xff1a;chown -R ftpd:ftpd /home/ftpd/testchmod 777 -R /home/ftpd/test…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023