EveryLike/pages/CSS/text/font-family.uvue

<template>
  <view class="uni-padding-wrap">
    <text class="common" style="font-family: monospace">font-family: monospace</text>
    <text class="common" style="font-family: cursive">font-family: cursive</text>
    <text class="common" style="font-family: AlimamaDaoLiTiTTF">font-family: 阿里妈妈刀隶体-ttf（网络字体下载后生效）</text>
    <text class="common" style="font-family: AlimamaDaoLiTiOTF">font-family: 阿里妈妈刀隶体-otf</text>
    <text class="common" style="font-family: AlimamaDaoLiTiOTF;font-weight: bold;font-style: italic;">font-family: 阿里妈妈刀隶体-otf（粗斜体）</text>
    <text style="font-family: UniFontFamily;">style 加载非 static 目录字体文件：{{uniIcon}}</text>
    <!--    <text class="common" style="font-family: AlimamaDaoLiTiWOFF">font-family: 阿里妈妈刀隶体-woff</text>
    <text class="common" style="font-family: AlimamaDaoLiTiWOFF2">font-family: 阿里妈妈刀隶体-woff2</text> -->
  </view>
  <!-- #ifdef APP -->
  <view style="margin: 24px 12px;">
    <button type="default" @click="openUniIcon">内置字体图标uni-icon示例</button>
  </view>
  <!-- #endif -->
</template>

<script lang="uts">
  export default {
    data() {
      return {
        uniIcon: '\ue100',
      }
    },
    methods: {
      openUniIcon() {
        uni.navigateTo({
          url: '/pages/CSS/text/font-family-icon'
        })
      }
    }
  }
</script>

<style>
  .common {
    font-size: 20px;
    line-height: 40px;
  }

  @font-face {
    font-family: AlimamaDaoLiTiTTF;
    src: url('https://qiniu-web-assets.dcloud.net.cn/uni-app-x/static/font/AlimamaDaoLiTi.ttf');
  }

  @font-face {
    font-family: AlimamaDaoLiTiOTF;
    src: url('/static/font/AlimamaDaoLiTi.otf');
  }

  @font-face {
    font-family: UniFontFamily;
    src: url('./uni.ttf');
  }

  /*  @font-face {
    font-family: AlimamaDaoLiTiWOFF;
    src: url('/static/font/AlimamaDaoLiTi.woff');
  }
  @font-face {
    font-family: AlimamaDaoLiTiWOFF2;
    src: url('/static/font/AlimamaDaoLiTi.woff2');
  } */
</style>