html5&css&js代码 034 自定义字体
- 一、代码
- 二、解释
这是一个带有自定义字体的网页，设置了页面背景颜色、文字颜色以及全局样式。它定义了三种自定义字体并通过@font-face规则引入外部字体文件，并通过CSS类（.f1, .f2, .f3）将这些自定义字体应用于h1元素上。同时，对body和div元素进行了基本的样式设置，如颜色、边距、宽度等。
一、代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>编程笔记 html5&css&js CSS字体</title>
<meta charset="utf-8" />
<style>
/* 设置页面的基本样式 */
body {
color: cyan; /* 文字颜色 */
background-color: teal; /* 背景颜色 */
margin: 0; /* 去除默认边距 */
}
/* 定义自定义字体 - MyFont1 */
@font-face {
font-family: "MyFont1"; /* 自定义字体名称 */
src: url("fonts/font2.ttf") format("truetype"); /* 字体文件路径及格式 */
font-weight: normal; /* 字体粗细 */
font-style: normal; /* 字体样式 */
}
/* 定义自定义字体 - MyFont2 */
@font-face {
font-family: "MyFont2"; /* 自定义字体名称 */
src: url("fonts/SourceHanSansCN-Bold.otf") format("opentype"); /* 字体文件路径及格式 */
font-weight: normal; /* 字体粗细 */
font-style: normal; /* 字体样式 */
}
/* 定义自定义字体 - MyFont3 */
@font-face {
font-family: "MyFont3"; /* 自定义字体名称 */
src: url("fonts/SourceHanSansCN-Light.otf") format("opentype"); /* 字体文件路径及格式 */
font-weight: normal; /* 字体粗细 */
font-style: normal; /* 字体样式 */
}
/* 设置h1标题的样式，默认字体和大小 */
h1 {
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif; /* 字体设置 */
font-size: large; /* 字号设置 */
}
/* 设置使用MyFont1字体的样式 */
.f1 {
font-family: "MyFont1", Arial, sans-serif; /* 自定义字体及备选字体 */
}
/* 设置使用MyFont2字体的样式 */
.f2 {
font-family: "MyFont2", Arial, sans-serif; /* 自定义字体及备选字体 */
}
/* 设置使用MyFont3字体的样式 */
.f3 {
font-family: "MyFont3", Arial, sans-serif; /* 自定义字体及备选字体 */
}
/* 设置div的基本样式，居中显示，固定宽度 */
div {
display: block; /* 显示为块级元素 */
margin: 20px auto; /* 上下边距20px，自动居中 */
width: 60%; /* 宽度设置 */
}
</style>
</head>
<body>
<div>
<!-- 使用默认字体显示的标题 -->
<h1>
《青少年成长管理》:
<br />
成长工程、成长要素、成长目标、成长资源、专业选择、成长导师、时间管理、学习方法、常见问题、
<br />
成长计划、项目计划、任务计划、计划执行、考核评价、调整改进、走进社会、改变世界、成就人生。
</h1>
<!-- 使用MyFont1字体显示的标题 -->
<h1 class="f1">
《青少年成长管理》:
<br />
成长工程、成长要素、成长目标、成长资源、专业选择、成长导师、时间管理、学习方法、常见问题、
<br />
成长计划、项目计划、任务计划、计划执行、考核评价、调整改进、走进社会、改变世界、成就人生。
</h1>
<!-- 使用MyFont2字体显示的标题 -->
<h1 class="f2">
《青少年成长管理》:
<br />
成长工程、成长要素、成长目标、成长资源、专业选择、成长导师、时间管理、学习方法、常见问题、
<br />
成长计划、项目计划、任务计划、计划执行、考核评价、调整改进、走进社会、改变世界、成就人生。
</h1>
<!-- 使用MyFont3字体显示的标题 -->
<h1 class="f3">
《青少年成长管理》:
<br />
成长工程、成长要素、成长目标、成长资源、专业选择、成长导师、时间管理、学习方法、常见问题、
<br />
成长计划、项目计划、任务计划、计划执行、考核评价、调整改进、走进社会、改变世界、成就人生。
</h1>
</div>
</body>
</html>
二、解释
在HTML和CSS中使用自定义字体可以让设计师和开发者为他们的网页提供独特的字体样式，从而增强视觉效果和品牌识别度。自定义字体通常是通过@font-face规则在CSS中定义的，该规则允许你指定字体文件并定义如何使用它们。
以下是如何在CSS中使用@font-face规则来定义和使用自定义字体的步骤：
- 获取字体文件：首先，你需要有一个自定义字体文件。这些文件通常是OpenType（.otf）或Web Open Font Format（.woff）格式。你可以从字体设计师那里购买或免费获取字体，或者自己创建字体。
- 在CSS中定义字体：使用@font-face规则在你的样式表中定义字体。你需要指定字体的名称、字体文件的路径以及字体格式。
在这个例子中，@font-face { font-family: 'MyCustomFont'; src: url('path/to/myfont.woff') format('woff'), /* 其他格式 */ url('path/to/myfont.otf') format('opentype'); }font-family属性定义了字体的名称（在这个例子中是"MyCustomFont"），src属性指定了字体文件的路径和格式。format属性用于指定字体文件支持的格式，这样可以确保在不同的浏览器中都能正确加载字体。 - 在HTML中使用字体：一旦在CSS中定义了自定义字体，你就可以在HTML中通过class或id选择器来应用这个字体。
或者，你可以将字体应用到特定的元素上：body { font-family: 'MyCustomFont', sans-serif; }
然后在HTML中这样使用：.my-custom-text { font-family: 'MyCustomFont', sans-serif; }<p class="my-custom-text">这段文本将使用自定义字体。</p>
自定义字体的使用可以显著提升网页的视觉效果，但需要注意的是，过多的字体文件会增加页面加载时间，而且并非所有字体都支持跨平台使用。因此，在设计网页时，应谨慎选择和使用自定义字体。
