Vue3 如何使用自定义字体 - CSS 和第三方库方法 - 常规

Vue3 本身并不提供字体相关的功能，但可以通过 CSS 或者第三方库来使用字体。

CSS 方式

在 HTML 文件中，使用 @font-face 定义字体，然后通过 CSS 样式来应用字体。

示例：

<!DOCTYPE html>
<html>
<head>
	<title>Vue3 使用字体</title>
	<style>
		@font-face {
			font-family: 'MyFont';
			 src: url('myfont.ttf') format('truetype');
		}
		.my-text {
			font-family: 'MyFont';
		}
	</style>
</head>
<body>
	<div class='my-text'>这是一个使用自定义字体的文本</div>
</body>
</html>

第三方库方式

可以使用第三方库如 Google Fonts、Adobe Fonts 等来获取和使用字体。

示例：

<!DOCTYPE html>
<html>
<head>
	<title>Vue3 使用字体</title>
	<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans'>
	<style>
		.my-text {
			font-family: 'Open Sans', sans-serif;
		}
	</style>
</head>
<body>
	<div class='my-text'>这是一个使用 Google Fonts 字体的文本</div>
</body>
</html>