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;
}复制
```
或者，你可以将字体应用到特定的元素上：
```
 .my-custom-text {
  font-family: 'MyCustomFont', sans-serif;
}复制
```
然后在HTML中这样使用：
```
 <p class="my-custom-text">这段文本将使用自定义字体。</p>复制
```

自定义字体的使用可以显著提升网页的视觉效果，但需要注意的是，过多的字体文件会增加页面加载时间，而且并非所有字体都支持跨平台使用。因此，在设计网页时，应谨慎选择和使用自定义字体。

html5&css&js代码 034 自定义字体

html5&css&js代码 034 自定义字体

一、代码

二、解释

前端提高篇（102）：jQuery高级方法callbacks、deferred

文本，wangEditor5展示HTML无样式，wangEditor5如何看源码，Ctrl U看CSS文件，代码高亮，Prism.js可以实现，解决方法，参考网页源代码的写法

【简单html静态网页代码】制作一个简单HTML宠物网页（HTML CSS）

html 无序标签有序标签及表单

CSS字体、行高等其他样式

CSS3新增属性(15个案例代码效果图素材)

基于CSS3媒体查询的响应式旅游网站设计与实现-计算机毕设附源码 12755

H5 CSS3-移动端兼容/调试/视口/flex布局

如何让CSS只在当前组件中起作用

CSS--解决图片变形的方法

前端哥

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

前端提高篇（102）：jQuery高级方法callbacks、deferred

解决npm install 报错 “npm err code 1“

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

JQuery中的load()、$

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001

2
CSS常用属性（文本属性）

2024-11-04 09:11:111000

3
TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000

4
CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000

5
vue使用datav echarts

2024-09-06 00:09:381000

6
使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000

7
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

8
小兔鲜儿网页首页制作黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000

9
《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

10
npm的使用

2024-08-18 00:08:131000

	<!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>

	@font-face {
	font-family: 'MyCustomFont';
	src: url('path/to/myfont.woff') format('woff'), /* 其他格式 */
	url('path/to/myfont.otf') format('opentype');
	}

	.my-custom-text {
	font-family: 'MyCustomFont', sans-serif;
	}

html5&css&js代码 034 自定义字体

html5&css&js代码 034 自定义字体

一、代码

二、解释

微信扫一扫：分享