如何在一个页面上使用两种不同的字体？

在一个页面上使用两种不同的字体可以通过CSS样式来实现。以下是一种常见的方法：

首先，在HTML文件的<head>标签内添加<style>标签，用于定义页面的样式。
在<style>标签内，使用@font-face规则来引入自定义字体。例如：

@font-face {
  font-family: "Font1";
  src: url("path/to/font1.ttf");
}

@font-face {
  font-family: "Font2";
  src: url("path/to/font2.ttf");
}

在上述代码中，"Font1"和"Font2"是自定义字体的名称，"path/to/font1.ttf"和"path/to/font2.ttf"是字体文件的路径。

接下来，使用CSS选择器来指定要应用不同字体的元素。例如，如果要将一个段落的字体设置为"Font1"，另一个段落的字体设置为"Font2"，可以使用以下代码：

p.font1 {
  font-family: "Font1", sans-serif;
}

p.font2 {
  font-family: "Font2", sans-serif;
}

在上述代码中，".font1"和".font2"是自定义的类选择器，可以根据需要进行修改。

最后，在HTML文件中的相应元素上应用定义的样式类。例如：

<p class="font1">这是使用Font1字体的段落。</p>
<p class="font2">这是使用Font2字体的段落。</p>

在上述代码中，第一个段落将应用"Font1"字体，第二个段落将应用"Font2"字体。

这样，你就可以在同一个页面上使用两种不同的字体了。

相关·内容

30道CSS 面试知识点总结

干货！iOS 与 Android 的APP 设计差异

了解并适当结合平台规范与优势，才能做到最佳的用户体验。在《最新Android &

「Adobe国际认证」书籍封面设计需要掌握的知识技巧？

我们被告知不要通过封面来判断书籍，但有时封面本身就是卖点。即使黑白电子书显示书籍封面的方式也会影响是否购买。

1 分钟学会 30 种编程语言

我一直很羡慕能开发出独立网站的人，这个网站呢，不一定需要多么高深的技术，但足够有想法，有意思，好玩。

玩转低代码-CSS介绍

低代码是一种使用拖拽可视化开发的工具，使用低代码可以提高软件的开发效率和开发质量。作为小白要想熟练的使用低代码工具一些基础的知识如html、css、javascript是必不可少的。如果直接去学习基础知识学习周期长，而且学完不一定能将所有知识应用到开发中来。为了降低小白学习低码的难度缩短学习周期，特此制作了本系列的基础教程。

50个有价值的CSS编写规则，让你写出更好的CSS

我最近写了篇《掌握和成为更好的Web开发人员的15件事》（地址：https://beforesemicolon.medium.com/15-css-things-to-master-and-become-a-better-web-developer-a18f370a8bc5），然后意识到编写CSS不仅需要专注于某些功能。

九张动画图回顾 Web 设计的 25 年历史

Froont，一家为web设计师制作工具的旧金山公司，用9个GIF格式动画来表现网页设计在过去25年的发展历程。如果你想知道为什么CSS这么重要，为什么Flash会逐渐淘汰，这些动画图或许能让你一窥究竟。

重学ASP.NET Core 中的标记帮助程序

标记帮助程序使服务器端代码可以在 Razor 文件中参与创建和呈现 HTML 元素。例如，内置的 ImageTagHelper 可以将版本号追加到图片名称。每当图片发生变化时，服务器都会为图像生成一个新的唯一版本号，因此客户端总能获得当前图像（而不是过时的缓存图像）。

【知识】Latex中的em/pt/mm等长度单位及使用场景

在LaTeX中，em、pt、mm等都是长度单位，用于定义文档中元素的尺寸，比如字体大小、页面边距、间距等。下面是一些常见的LaTeX长度单位和它们的含义：

创建Excel表格的13项原则

创建一个易读，美观，无歧义的Excel表格应该是职场人士的素养之一。平常的日常工作中经常使用Excel表格来进行工作的交流，然而，如果我们问问自己，“请问你会想看别人做的Excel表格吗？” 恐怕多数人的回答是“NO”。

Typecho 下谷歌 AdSense 文章内嵌广告体验

昨天明月将本博客“文章页脚广告位”的广告更换为了谷歌 AdSense “文章内嵌广告”，本来是想用“匹配内容”的，可惜iMydl.tech目前还没有达到“匹配内容”的要求，所以就退而求其次使用 “文章内嵌广告”了，没有想到 “文章内嵌广告”也是这么的惊艳。

Refactoring UI

「毕业设计」调教Word指南

请注意，本文编写于 1102 天前，最后修改于 1102 天前，其中某些信息可能已经过时。

[原创译文]不可不知的10条UI设计经验法则

静电说：近期我们将连续翻译海外作者Danny Sapio的设计经验法则文章。在翻译的过程中，自己也受益匪浅，一方面，我会通读英文原文，大声朗读出来，并标注生词来进行学习，另一方面，也从中获取了不少新鲜的观点，验证了自己之前的观点。比如说，设计是基于密度的而非像素。就是一个非常棒的法则。当我们还在为设计多少倍的图迷茫无措的时候，你确实应该更去懂一些原理。来看文章吧！

PDF Explained（翻译）第六章文本和字体

本文是对PDF Explained(by John Whitington)第六章《Text And Fonts 》的摘要式翻译，并加入了一些自己的理解。

URL2Video：把网页自动创建为短视频

文 / Peggy Chi，高级研究员，Irfan Essa，高级工程师，Google研究院

serif，sans-serif，monospace，cursive和fantasy

面试题整理｜45个CSS面试题

CSS已成为Web设计不可或缺的一部分，它让web页面变得更加美观，更具设计感。在前端面试中，CSS面试题也占有一定比重。本篇文章，将为大家分享45个和CSS相关的面试题及其解析，难度分为：初级、中级、高级三个部分，由易到难，循序渐进。

VUE+WebPack游戏设计：'乘法防线'游戏设计

从本节开始，我们进入新的游戏设计阶段。本次游戏设计，我们需要使用html5专有的canvas，也就是画布对象。同时为了便于在canvas上绘制图案，我们引入一个第三方库叫做CreateJS,它能帮我们

Apple Store A/B测试真的难吗？一招教你学会大多数人都不会的本领！

作者：吕东昊审校：Sarah 本文长度为2343字，预估阅读时间7分钟。导读：本文作者将向大家介绍A/B测试的方法。只要数字营销的概念依然存在，那么就需要用到A/B测试。这个原理很简单：就是

为什么margin、padding和其他间距技术应使用 px 单位

CSS 长度是距离值的一种。CSS 百分比与长度类似，但区别在于它们总是页面中其他内容的一部分，具体取决于它们与什么属性一起使用。长度可以是绝对值，也可以是相对值。

css写作建议和性能优化小结

还有几天就到国庆中秋了，快要放假了，先祝大家节日快乐！之前写过js的写作建议和技巧，那么今天就来聊聊css吧！说到css，每一个网页都离不开css，但是对于css，很多开发者的想法就是，css只要能用来布局，把效果图排出来就可以了，其它的细节或者优化，不需要怎么考虑。但是我觉得css可不只是把页面的布局完成就是完事的，还需要考虑很多细节有优化，更不会像大家想得那么简单，在学习当中，如果发现什么技巧或者优化的点，我也会学以致用！那么今天，就分享下我总结的css写作建议和性能优化的一些问题！希望能帮让大家对神奇的css有一个新认识，当然，如果大家觉得还有什么其它的建议。欢迎指点！

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

如何在一个页面上使用两种不同的字体？

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐