1、加载字体

注意：字体文件名称 zpix 和 font-family中的值 'zpix' 需要一致

@font-face {
    font-family: 'zpix'; 
    src: url('/blog/assets/font/zpix.ttf');
}

/*以下写法是无效的*/
@font-face {
    font-family: 'font-zpix'; 
    src: url('/blog/assets/font/zpix.ttf');
}

2、使用

html{
    font-family: 'zpix';
}

3、效果

<template>
    <h1 class="zpix">你好zpix</h1>
</template>

<script>
export default {
    name: "font-zpix",
    data() {
        return {}
    },
    mounted() {
    },
    methods: {},
}
</script>

<style lang="scss" scoped>
@font-face {
    font-family: 'zpix';
    src: url('/blog/assets/font/zpix.ttf');
}
.zpix{
    font-family: 'zpix';
}
</style>

你好zpix

4、总结

如果 @font-face 中的字体文件名称和所对应的 font-family 不一致，则字体无法生效。