font-face自定义字体

Vue示例前端Demo展示

原创已于 2024-12-09 17:56:49 修改 · 297 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #css

于 2024-12-09 17:52:18 首次发布

直接上demo(vue示例)

<template>
  <div class="content-wrapper">
    <div class="title">自定义字体demo</div>
    <div class="content">
      <span :style="{ fontFamily: state.fontFamily }">Hello World!</span>
      <div>
        <a-form>
          <a-form-item label="更换字体">
            <a-select v-model:value="state.fontFamily" @change="onChange">
              <a-select-option
                v-for="(item, index) in state.fontFace"
                :key="index"
                :value="item"
                >{{ item }}</a-select-option
              >
            </a-select>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, toRefs, onMounted } from "vue";

const state = reactive({
  fontFace: ["字魂观潮手书", "WD-XL"],
  fontFamily: "字魂观潮手书",
});

const onChange = (value) => {
  console.log(value);
  state.fontFamily = value;
};
</script>
<style lang="less" scoped>
@font-face {
  // 字体名称
  font-family: "字魂观潮手书";
  // 字体文件路径
  src: url("../../assets/font/字魂观潮手书.ttf") format("truetype");
}
@font-face {
  font-family: "WD-XL";
  src: url("../../assets/font/WD-XL.ttf") format("truetype");
}
.content-wrapper {
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 100vh;
  .title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
  }
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
</style>