快捷導(dǎo)航

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

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

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

一、原生使用自定義字體

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

首先下載字體包解壓，創(chuàng)建文件夾放置字體相關(guān)文件
可在使用頁面直接聲明引入使用（序號(hào)2.），也可以創(chuàng)建css文件通過外鏈引用（序號(hào)1.）
css文件內(nèi)容，即@font-face{...}
使用時(shí)的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"),
        /* 使用自定義字體默認(rèn)隱藏，swap：后備文本立即顯示直到自定義字體加載完成后再使用自定義字體渲染文本。 */
        /* font-display: swap; */
    }
    div {
        font-size: 40px;
    }
    /* 使用字體，名字需要和@font-face中的font-family一致 */
    .app {
        font-family: "阿里媽媽東方大楷 Regular";
    }
</style>
<body>
    <div class="app">這是一段測(cè)試文字，用于測(cè)試CSS字體。</div>
    <div class="text">這是第二段測(cè)試文字，用于測(cè)試CSS字體。</div>
</body>
</html>

二、VUE使用自定義字體

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

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

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

頁面通過import引入，對(duì)應(yīng)使用外部字體

注意引入方式路徑及對(duì)應(yīng)字體名字

<template>
  <div class="box">
    <div class="app">這是一段測(cè)試文字，用于測(cè)試CSS字體。</div>
    <div class="text">這是第二段測(cè)試文字，用于測(cè)試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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: