📌  相关文章
📜  自定义字体 vue - TypeScript (1)

📅  最后修改于: 2023-12-03 15:41:24.281000             🧑  作者: Mango

自定义字体 Vue - TypeScript

简介

在网页设计中，选择合适的字体可以提升用户体验。但是，网页默认支持的字体种类有限，如何实现自定义字体呢？

在 Vue + TypeScript 的项目中，我们可以使用 @font-face 属性来实现自定义字体。

步骤
  1. 首先，我们需要找到一款自定义字体，将其下载并引入到项目中。
@font-face {
    font-family: 'CustomFont';
    src: url('./assets/fonts/CustomFont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
  1. 然后，在 Vue 组件中，可以使用以下方式指定字体：
<template>
  <div class="custom-font">
    <h1 style="font-family: 'CustomFont', sans-serif;">Custom Font</h1>
  </div>
</template>
TypeScript 类型定义

如果在 TypeScript 项目中使用以上代码，可能会出现字体名无法识别的情况。

为了避免这种情况，我们可以在 src/typings/custom.d.ts 文件中添加以下代码：

declare module '*.ttf' {
  const url: string;
  export default url;
}

这样，在 Vue 组件中引入字体文件时，TypeScript 就能够正确地识别字体名了，可以做到类型检测、 IntelliSense 等 TypeScript 的各种特性。

参考链接