font-family

# font-family

CSS 属性 font-family 允许你通过给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体。

# uni-app x 兼容性

Web	Android	iOS
4.0	3.9	4.11

# 语法

font-family: <family-name>;

# font-family 的属性值

名称

兼容性

描述

cursive

草书字体。这种字体有的有连笔，有的还有特殊的斜体效果。因为一般这种字体都有一点连笔效果，所以会给人一种手写的感觉。
例如：Brush Script MT、Brush Script Std、Lucida Calligraphy、Lucida Handwriting、Apple Chancery、cursive。

fantasy

Fantasy 字体主要是那些具有特殊艺术效果的字体。
例如：Papyrus、Herculanum、Party LET、Curlz MT、Harrington、fantasy。

monospace

等宽字体，即字体中每个字宽度相同。
例如：Fira Mono、DejaVu Sans Mono、Menlo、Consolas、Liberation Mono、Monaco、Lucida Console、monospace。

sans-serif

无衬线字体，即笔画结尾是平滑的字体。
例如：Open Sans、Fira Sans、Lucida Sans、Lucida Sans Unicode、Trebuchet MS、Liberation Sans、Nimbus Sans L、sans-serif。

serif

带衬线字体，笔画结尾有特殊的装饰线或衬线。
例如：Lucida Bright、Lucida Fax、Palatino、Palatino Linotype、Palladio、URW Palladio、serif。

uni-icon

uni-app x 内置字体图标 uni-icon

# 适用组件

# 示例

hello uni-app x

Template

Script

<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>



<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>

# 字体设置

对于系统中已经存在的字体，font-family里直接写字体名称即可。
但对于系统中不存在的字体，需要通过src属性的url方法来指定字体路径。如下：

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

关于自定义字体的格式

app-android: 支持ttf和otf字体。不支持woff和woff2和可变字体
app-ios: 支持ttf、otf、woff、woff2，需要注意，css 中的 font-family 值可以随意取，这个名字不是字体真正的名字。字体真正的名字（font-family），也就是注册到系统中的名字是保存在字体二进制文件中的。你需要确保你使用的字体的真正名字（font-family）足够特殊，否则在向系统注册时可能发生冲突，导致注册失败，你的字符被显示为‘?’。如果你使用 http://www.iconfont.cn/ 来构建你的 iconfont。确保在项目设置中，设置一个特殊的 font-family 名字。默认是 “iconfont”，极大可能发生冲突。
web: 支持的字体取决于浏览器，详见mdn或caniuse
app平台: 指定自定义字体路径时，必须使用url()包裹，支持本地文件路径、远程地址，4.33 版本开始支持 base64 格式数据；

自定义字体的加载，除了在css的src中设置，也可以使用API uni.loadFontface