html5cssjs代码 034 自定义字体

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规则来定义和使用自定义字体的步骤:

  1. 获取字体文件:首先,你需要有一个自定义字体文件。这些文件通常是OpenType(.otf)或Web Open Font Format(.woff)格式。你可以从字体设计师那里购买或免费获取字体,或者自己创建字体。
  2. 在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 属性用于指定字体文件支持的格式,这样可以确保在不同的浏览器中都能正确加载字体。
  3. 在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>
    

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Oracle AI Vector Search 支持使用 SQL 生成向量和计算向量相似度

Oracle AI Vector Search 支持使用 SQL 生成向量和计算向量相似度 0. 事情准备1. 使用 SQL 生成向量数据2. 使用 SQL 计算欧氏距离(Euclidean distance)3. 使用 SQL 计算余弦相似度(Cosine similarity)4. 使用 SQL 计算点积相似度 (Dot Product Similarity)5. 使用 SQL 计算曼哈…

第十二届蓝桥杯省赛CC++ 研究生组-路径

记录到每个结点的最短距离&#xff0c;以此为基础计算后续结点最优值 #include<iostream> #include<algorithm> using namespace std; typedef long long ll;ll gcd(int a, int b){if(!b) return a;return gcd(b, a % b); }int main(){ll dp[2022] {0};//dp[i]记…

如何打破SAST代码审计工具的局限性?

关键词&#xff1a;白盒测试&#xff1b;代码分析工具&#xff1b;代码扫描工具&#xff1b;静态代码检测工具&#xff1b; 在代码的世界里&#xff0c;安全问题如同潜伏的暗礁&#xff0c;随时可能让航行中的软件项目触礁沉没。SAST代码审计工具如同雷达一样&#xff0c;以其独…

inputStream.avaliable()方法网络操作读取不全BUG

一、问题描述 公司有个需求&#xff0c;就是调用方&#xff08;我&#xff09;需要把pdf文件转为Base64字符串作为参数传递为被调用方&#xff0c;以下是大致转换过程&#xff1a; URL url new URL("http://xxxx.pdf");HttpURLConnection uc (HttpURLConnection) …

docker入门(十)—— docker-compose详解

Docker Compose dockercompose官网&#xff1a;https://docs.docker.com/compose/ 什么是 docker compose Docker Compose 是用于定义和运行多容器应用程序的工具。 这是解锁简化和高效的开发和部署体验的关键。 Compose 简化了对整个应用程序堆栈的控制&#xff0c;让您能…

html js css如何使循环混播放视频时视频切换很平滑的过渡

1.html代码 <video id"video1" autoplay loop muted playsinline><source src"video1.mp4" type"video/mp4"> </video> <video id"video2" autoplay loop muted playsinline><source src"video2.mp4…

Chrome 114 带着侧边栏扩展来了

效果展示 manifest.json {"manifest_version": 3,"name": "ChatGPT学习","version": "0.0.2","description": "ChatGPT,GPT-4,Claude3,Midjourney,Stable Diffusion,AI,人工智能,AI","icons"…

全量知识系统 控制器-神经网络设计(设想及百度AI回复)

---备忘&#xff1a;权值、阈值和极值 在神经元的计算中&#xff0c;包括三种计算值&#xff1a;权值、阈值和极值。分别是为全量知识系统设计的三级神经网络中神经元不同层级的计算任务。其中权值 是全连接的性质&#xff0c;阈值是池化的性质&#xff0c;极值是卷积的性质。…

cocos 3.8开发 微信小游戏分包技巧压缩主包

Creator 版本&#xff1a; 3.8.2 目标平台&#xff1a;小游戏开发 压缩后 我不知道别人压缩几百kb是怎么做到的。不过哪个要钱。 我这个技巧不用花钱。 论坛有教程但是没有教详细怎么做。 开整&#xff01; 做一个空白的场景。然后写一个load脚本。load主场景。 从代码可…

数据结构知识总结

二叉树 满二叉树 特性 所有叶子结点都集中在二叉树的最下面一层上&#xff0c;而且结点总数为&#xff1a;2^n-1 (n为层数 / 高度&#xff09; 完全二叉树 特性 若设二叉树的高度为h&#xff0c;除第h层外&#xff0c;其他各层的节点数都达到最大个数&#xff0c;第h层有…

Http中Host,Referer,Origin和Access-Control-Allow-Origin

Http中Host&#xff0c;Referer&#xff0c;Origin和Access-Control-Allow-Origin 文章目录 Http中Host&#xff0c;Referer&#xff0c;Origin和Access-Control-Allow-OriginHost定义特性作用 Referer定义特性作用 Origin定义特性作用 Access-Control-Allow-Origin定义特性作用…

阐述Dubbo协议

1 Dubbo协议概述 Dubbo协议是建立在TCP&#xff08;传输层协议&#xff09;之上的一种应用程序协议。它参考了TCP协议栈中的协议&#xff0c;协议内容由header和body两部分组成。 2 协议头header的组成 协议头组成如下所示。 header格式bit序号0-78-1516-2324-3132-9596-127内…

C语言——指针练习:输出最大值与最小值

题目描述&#xff1a; 输出十个整数中的最大值与最小值。 输入&#xff1a; 十个整数。 输出&#xff1a; 最大值与最小值。 代码如下&#xff1a; #include<stdio.h>int main() {int a[10], i, max, min, *p;p a;for (i 0; i < 10; i)scanf("%d", p…

基于微信小程序的CMS内容管理系统开发笔记

背景调研 内容管理CMS小程序的帮助运营者创建和管理小程序内容&#xff0c;提供一个直观的操作界面&#xff0c;能够轻松地添加、编辑和发布内容&#xff0c;而无需了解复杂的编程知识。可以进行栏目管理&#xff0c;文章管理&#xff0c;编辑文章内容&#xff0c;包括文字、图…

React腳手架已經創建好了,想使用Vite作為開發依賴

使用Vite作為開發依賴 安裝VITE配置VITE配置文件簡單的VITE配置項更改package.json中的scripts在根目錄中添加index.html現在可以瀏覽你的頁面了 安裝VITE 首先&#xff0c;在現有的React項目中安裝VITE npm install vite --save-dev || yarn add vite --dev配置VITE配置文件 …

蓝桥杯2023年第十四届省赛真题-阶乘求和

一、题目 【问题描述】 令 S 1 ! 2 ! 3 ! . . . 202320232023 ! S 1! 2! 3! ... 202320232023!S1!2!3!...202320232023!&#xff0c;求 S SS 的末尾 9 位数字。 提示&#xff1a;答案首位不为 0。 【答案提交】 这是一道结果填空的题&#xff0c;你只需要算出结果后…

【UE5】动画蒙太奇简述

项目资源文末百度网盘自取 动画蒙太奇基本功能 动画蒙太奇&#xff08;Animation Montage&#xff09; 可以将多个 动画序列&#xff08;Animation Sequences&#xff09; 合并为单个资产并通过蓝图播放&#xff0c;还可以将一个蒙太奇动画切分为多个 蒙太奇分段&#xff08;M…

六大排序精解

排序概念 排序&#xff1a;所谓排序&#xff0c;就是使一串记录&#xff0c;按照其中的某个或某些关键字的大小&#xff0c;递增或递减的排列起来的操作。稳定性&#xff1a;假定在待排序的记录序列中&#xff0c;存在多个具有相同的关键字的记录&#xff0c;若经过排序&#x…

app上传图片和视频

推荐一个插件&#xff1a;上传图片、视频 包括预览、压缩、手动上传、uniCloud上传 等功能 - DCloud 插件市场 基础代码&#xff1a;一句话解决直接上代码&#xff01;&#xff01;&#xff01; <template><view class"modify-page"><u-navbar titl…

安装nginx和PHP

首先规划四台虚拟机&#xff0c;之前的主从数据库已经两台&#xff0c;其余两台&#xff0c;一个设置nginx&#xff0c;一个是php 首先NGINX的概念&#xff0c;请参考https://blog.csdn.net/hyfsbxg/article/details/122322125。正向代理&#xff0c;反向代理&#xff0c;可以…