Vue和原生JS中如何使用自定義字體

更新時間：2024年01月05日 15:14:13 作者：加油樂

這篇文章主要為大家詳細介紹了Vue和原生JS中如何使用自定義字體,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以了解下

一、原生使用自定義字體

共兩種，外鏈及內(nèi)部聲明

首先下載字體包解壓，創(chuàng)建文件夾放置字體相關(guān)文件
可在使用頁面直接聲明引入使用（序號2.），也可以創(chuàng)建css文件通過外鏈引用（序號1.）
css文件內(nèi)容，即@font-face{...}
使用時的font-family，需要和@font-face中聲明的font-family一致

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1.通過外鏈引入字體 -->
    <!-- <link rel="stylesheet" href="./a.css"> -->
</head>
<style>
    /* 2.通過頁面生命字體  */
    @font-face {
        /* 聲明字體 */
        font-family: "阿里媽媽東方大楷 Regular";
        /* 引入字體文件，注意路徑 */
        src: url("./font/AlimamaDongFangDaKai-Regular.ttf"),
        /* 使用自定義字體默認隱藏，swap：后備文本立即顯示直到自定義字體加載完成后再使用自定義字體渲染文本。 */
        /* font-display: swap; */
    }
    div {
        font-size: 40px;
    }
    /* 使用字體，名字需要和@font-face中的font-family一致 */
    .app {
        font-family: "阿里媽媽東方大楷 Regular";
    }
</style>
<body>
    <div class="app">這是一段測試文字，用于測試CSS字體。</div>
    <div class="text">這是第二段測試文字，用于測試CSS字體。</div>
</body>
</html>

二、VUE使用自定義字體

頁面聲明方法與原生同理，不做過多演示，本次僅演示外部引入

首先下載字體包解壓，在assets中創(chuàng)建文件夾文件夾放置外部資源-字體相關(guān)文件
創(chuàng)建css文件，聲明要使用的字體
聲明的字體名字隨意，但使用時必須對應聲明的名字，css內(nèi)容如下：

/* css文件 */
@font-face {
    /* 聲明字體 */
    font-family: "阿里媽媽東方大楷 Regular";
    /* 引入字體文件，注意路徑 */
    src: url("./font/AlimamaDongFangDaKai-Regular.ttf"),
    /* 使用自定義字體默認隱藏，swap：后備文本立即顯示直到自定義字體加載完成后再使用自定義字體渲染文本。 */
    /* font-display: swap; */
}
@font-face {
    /* 聲明字體 */
    font-family: "le";
    /* 引入字體文件，注意路徑 */
    src: url("./font1/DingTalk-JinBuTi.ttf"),
    /* 使用自定義字體默認隱藏，swap：后備文本立即顯示直到自定義字體加載完成后再使用自定義字體渲染文本。 */
    /* font-display: swap; */
}

頁面通過import引入，對應使用外部字體

注意引入方式路徑及對應字體名字

<template>
  <div class="box">
    <div class="app">這是一段測試文字，用于測試CSS字體。</div>
    <div class="text">這是第二段測試文字，用于測試CSS字體。</div>
  </div>
</template>
<script setup>
import { ref, reactive, toRefs, watch, computed, defineProps } from "vue";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
const data = reactive({});
// const { } = toRefs(data)
</script>
<style scoped lang="scss">
// 引入css文件
@import "../assets/a.css";
div {
  font-size: 40px;
}
/* 使用字體，名字需要和css文件@font-face中的font-family一致 */
.app {
  font-family: "阿里媽媽東方大楷 Regular";
}
.text {
  font-family: "le";
}
</style>

到此這篇關(guān)于Vue和原生JS中如何使用自定義字體的文章就介紹到這了,更多相關(guān)Vue自定義字體內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: