随笔- 86 文章- 0 评论- 0 阅读- 25338

字体

<span> 标签

<span> 标签常被用来组合文档中的行内元素，以便通过样式来格式化它们
一个比较通俗的约定是：重点要突出的字，使用 <span> 套起来
span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化；如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会任何视觉上的差异

常用字体样式

font-family：设置字体
- serif：有衬线字体
- sans-serif：无衬线字体
- monospace：等宽字体
- cursive：草书字体
- fantasy：具有特殊艺术效果的字体
font-style：设置字体的风格，例如倾斜、斜体等
- normal：默认值，文本以正常字体显示
- italic：文本以斜体显示
- oblique：文本倾斜显示
font-size：设置字体尺寸(默认为16px, 16px = 1em)
font-weight：设置字体粗细
- normal：默认值，标准字体
- bold：粗体字体
- bolder：更粗的字体
- lighter：更细的字体
- 100、200、300、400、500、600、700、800、90：由细到粗的设置字体粗细
color：字体颜色

示例

 <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 
         * font-style: 字体风格(主要用于指定斜体文本)
         * font-family: 字体
         * font-size: 字体大小(默认为16px, 16px = 1em)
         * font-weight: 字体粗细
         * color: 字体颜色
         */
 
        #title {
            font-size: 50px;
            color: deeppink;
        }
 
        body {
            font-family: "楷体";
            font-size: 30px;
            color: cadetblue;
        }
        h1 {
            font-size: 100px;
            font-style: italic;
        }
        .p1 {
            font-weight: bold;
        }
    </style>
</head>
 
<body>
    <span id="title">欢迎学习字体样式！</span>
    <h1>故事介绍</h1>
    <p class="p1">在阿克佩乐高大陆，冒险者们发现通过一个隐秘的洞窟就可以到达一个极度冰冷的地方，里面充满了巨大的冰层。</p>
    <p>一头肥硕的白熊从洞窟深处向人群中冲来，没人知道这头熊从哪里来，它在洞中呆了多久，它又是靠吃什么生存下来的。白熊一身蛮肉，孔武有力，不好对付，必须打败它，才能继续探险之旅!</p>
 
    <p>But you, gods, will give us some faults to make us men.</p>
</body>
 
</html>

如果您觉得阅读本文对您有帮助，请点一下“推荐”按钮，您的“推荐”将是我最大的写作动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文连接，否则保留追究法律责任的权利。

posted @ 2022-09-18 20:45 TNTksals 阅读(118) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 网页基本标签

· 列表和表格

· HTML入门-----常用标签之字体样式标签

· 字体——集大成的font（倾斜，大小写，粗细，大小，行高，字体）

· HTML常用字体标签：揭秘HTML字体标签，让你的网页“字”得其乐！

阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现

公告

昵称： TNTksals
园龄： 3年4个月
粉丝： 4
关注： 1

+加关注

2025年3月

日

一

二

三

四

五

六

TNTksals

那些隔过黑暗的花与水......

字体

字体

<span> 标签

常用字体样式

示例

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

推荐排行榜

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
	/*
	* font-style: 字体风格(主要用于指定斜体文本)
	* font-family: 字体
	* font-size: 字体大小(默认为16px, 16px = 1em)
	* font-weight: 字体粗细
	* color: 字体颜色
	*/

	#title {
	font-size: 50px;
	color: deeppink;
	}

	body {
	font-family: "楷体";
	font-size: 30px;
	color: cadetblue;
	}
	h1 {
	font-size: 100px;
	font-style: italic;
	}
	.p1 {
	font-weight: bold;
	}
	</style>
	</head>

	<body>
	<span id="title">欢迎学习字体样式！</span>
	<h1>故事介绍</h1>
	<p class="p1">在阿克佩乐高大陆，冒险者们发现通过一个隐秘的洞窟就可以到达一个极度冰冷的地方，里面充满了巨大的冰层。</p>
	<p>一头肥硕的白熊从洞窟深处向人群中冲来，没人知道这头熊从哪里来，它在洞中呆了多久，它又是靠吃什么生存下来的。白熊一身蛮肉，孔武有力，不好对付，必须打败它，才能继续探险之旅!</p>

	<p>But you, gods, will give us some faults to make us men.</p>
	</body>

	</html>