快應用 自定義字體樣式

?font-face? 用于定義字體樣式。當需要為文本組件設置自定義字體時，可以在? style ?中定義 font-?face? 作為自定義字體，然后在 ?font-family? 中可以引用該字體。

自定義字體可以是從項目中的字體文件或網絡字體文件中加載的字體。

注： 只支持 ttf 和 otf 格式的字體。

定義 font-face

@font-face {
  font-family: myfont;
  src: url('http://www.example.com/myfont.ttf');
}

font-family

自定義字體的名稱。

src

自定義字體的來源。

目前支持的字體來源有 2 種：

• 項目中的字體文件: 通過 ?url? 指定項目中的字體文件路徑(只支持絕對路徑)
• 網絡字體文件：通過 ?url? 指定網絡字體的地址

使用 font-face

在 ?style? 中定義了 ?font-face? 后，我們可以在文本組件的 ?font-family? 樣式中指定 ?font-face 的名稱，該組件即可應用 ?font-face? 定義的字體。 ?font-face? 中暫不支持設置多個 ?src? 。

示例

<template>
  <!-- template里只能有一個根節(jié)點 -->
  <div class="demo-page">
    <text class="font">測試自定義字體 test custom font</text>
  </div>
</template>

<style>
  @font-face {
    font-family: myfont;
    src: url("http://www.example.com/myfont.ttf");
  }
  .demo-page {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .font {
    font-family: myfont, serif;
  }
</style>

圖標字體(icon-font)

將圖標制作成字體文件，保存到項目文件中（如:src/Common/iconfont.ttf），在 ?style? 中定義一個 ?font-face? ，然后在需要使用圖標字體的地方使用該?font-face? 作為組件的字體，組件的內容為字體文件中我們需要使用的圖標的字符。

示例

<template>
  <!-- template里只能有一個根節(jié)點 -->
  <div class="demo-page">
    <text>測試text中嵌套iconfont<span class="icon-font-span">&#xe822;</span>test icon font</text>
  </div>
</template>

<style>
  @font-face {
    font-family: iconfont;
    src: url("/Common/iconfont.ttf");
  }
  .demo-page {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .icon-font-span {
    font-family: iconfont;
    font-size: 40px;
    color: #ff0000;
  }
</style>

font-family   示例代碼

查看示例代碼