用Vue3+ElementPlus实现了一个CSS字体在线展示工具

2023-12-10发表2024-08-11更新 Xiamu Front-End / Vue几秒读完 (大约40个字)

用Vue3+ElementPlus实现了一个CSS字体在线展示工具

Vite App (xiamu-ssr.github.io) This is an example image https://xiamu-ssr.github.io/FontFamilyCode/

Vue3引用外部TTF字体，其实很简单！

2023-12-09发表2024-08-11更新 Xiamu Front-End / Vue1 分钟读完 (大约146个字)

Vue3引用外部TTF字体，其实很简单！

一、下载字体

这里推荐一个网站
字体天下

二、引入TTF字体

将已有的xx.ttf按照如下示例放入assets文件夹下
并且同级目录创建fonts.css写入以下内容

language-bash

@font-face {
   
    font-family: 'my-self-font';
    src: url('./XiangJiaoDaJiangJunLingGanTi-2.ttf');
    font-weight: normal;
    font-style: normal;
}

其中font-family: 'my-self-font';就是你自定义字体的名字

在main.js引入fonts.css

language-bash

1	import './assets/fonts/fonts.css'

三、使用字体

language-html

1	<span style="font-family: my-self-font">你好啊</span>

This is an example image