快應(yīng)用 自定義字體樣式

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

自定義字體可以是從項(xiàng)目中的字體文件或網(wǎng)絡(luò)字體文件中加載的字體。

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

定義 font-face

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

font-family

自定義字體的名稱。

src

自定義字體的來(lái)源。

目前支持的字體來(lái)源有 2 種：

• 項(xiàng)目中的字體文件: 通過(guò) ?url? 指定項(xiàng)目中的字體文件路徑(只支持絕對(duì)路徑)
• 網(wǎng)絡(luò)字體文件：通過(guò) ?url? 指定網(wǎng)絡(luò)字體的地址

使用 font-face

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

示例

<template>
  <!-- template里只能有一個(gè)根節(jié)點(diǎn) -->
  <div class="demo-page">
    <text class="font">測(cè)試自定義字體 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>

圖標(biāo)字體(icon-font)

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

示例

<template>
  <!-- template里只能有一個(gè)根節(jié)點(diǎn) -->
  <div class="demo-page">
    <text>測(cè)試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   示例代碼

查看示例代碼