vue项目使用外部字体

最新推荐文章于 2024-06-11 15:32:55 发布

浮桥

最新推荐文章于 2024-06-11 15:32:55 发布

阅读量2.1k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44801790/article/details/125641292

版权

1、下载字体

https://www.dafont.com/

在这里插入图片描述

2、项目中`assets`下添加一个字体样式文件夹`front`

将下载好的文件放到文件夹中，并创建一个front.css字体样式文件：
在这里插入图片描述

@font-face {
  font-family: "jap_trad";
  src: url('jap_trad.otf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Kami-Geisha";
  src: url('Kami-Geisha.ttf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Galaxy_dingbats-Regular";
  src: url('Galaxy_dingbats-Regular.ttf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Birthdaze";
  src: url('Birthdaze.ttf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "DS-DIGI";
  src: url('DS-DIGI.ttf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "DS-DIGIB";
  src: url('DS-DIGIB.ttf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "DS-DIGII";
  src: url('DS-DIGII.ttf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "DS-DIGIT";
  src: url('DS-DIGIT.ttf');
  font-weight: normal;
  font-style: normal;
}

3、将样式引入到`main.s`文件中

import '@/styles/index.scss'

4、使用字体

<template>
    <div class="fonts-box">
        <!-- https://www.dafont.com/ -->
        <input class="input" type="text" v-model="text" />
        <button class="btn" @click="text=''">重置</button>
        <h3 class="jap-trad">{{text}}</h3>
        <h3 class="kami-geisha">{{text}}</h3>
        <!-- https://www.dafont.com/galaxy-dingbats.font -->
        <h3 class="Galaxy_dingbats-Regular">{{text}}</h3>
        <!-- https://www.dafont.com/birthdaze.font -->
        <h3 class="Birthdaze">{{text}}</h3>
        <!-- https://www.dafont.com/ds-digital.font -->
        <h3 class="DS-DIGI">{{text}}</h3>
        <h3 class="DS-DIGII">{{text}}</h3>
        <h3 class="DS-DIGIB">{{text}}</h3>
        <h3 class="DS-DIGIT">{{text}}</h3>
    </div>
</template>

<script>
export default {
  name: '',
  components: {},
  data () {
    return {
      text: 'f k l o r w z o 2'
    }
  },
  mounted () {},
  methods: {}
}
</script>

<style scoped lang="scss">
.fonts-box {
    padding: 30px;
}
.input {
    height: 36px;
    padding: 0px 20px;
    border-radius: 5px;
}

.btn {
    height: 36px;
    padding: 0px 16px;
}

.jap-trad {
    font-size: 35px;
    font-family: 'jap_trad';
}

.kami-geisha {
    font-size: 35px;
    font-weight: 500;
    font-family: 'Kami-Geisha';
}

.Galaxy_dingbats-Regular {
    font-size: 60px;
    font-weight: 500;
    font-family: 'Galaxy_dingbats-Regular';
}

.Birthdaze {
    font-weight: 500;
    font-size: 60px;
    font-family: 'Birthdaze';
}

.DS-DIGI{
    font-size: 35px;
    font-weight: 500;
    font-family: 'DS-DIGI';
}

.DS-DIGIB{
    font-size: 35px;
    font-weight: 500;
    font-family: 'DS-DIGIB';
}

.DS-DIGII{
    font-size: 35px;
    font-weight: 500;
    font-family: 'DS-DIGII';
}

.DS-DIGIT{
    font-size: 35px;
    font-weight: 500;
    font-family: 'DS-DIGIT';
}
</style>