font-family.md 1.8 KB
Newer Older
D
DCloud_LXH 已提交
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
## font-family


<!-- CSSJSON.font-family.description -->

<!-- CSSJSON.font-family.syntax -->

<!-- CSSJSON.font-family.values -->

<!-- CSSJSON.font-family.defaultValue -->

<!-- CSSJSON.font-family.unixTags -->

<!-- CSSJSON.font-family.compatibility -->

D
DCloud_LXH 已提交
16 17
<!-- CSSJSON.font-family.example -->

W
wanganxp 已提交
18 19 20 21 22 23 24 25 26 27 28 29 30
### 字体设置

对于系统中已经存在的字体,font-family里直接写字体名称即可。\
但对于系统中不存在的字体,需要通过src属性的url方法来指定字体路径。如下:
```css
@font-face {
    font-family: UniFontFamily;
    src: url('/static/uni.ttf');
  }
```

**关于自定义字体的格式**
- app-android: 支持ttf和otf字体。不支持woff和woff2和可变字体
DCloud_iOS_XHY's avatar
DCloud_iOS_XHY 已提交
31
- app-ios: 支持ttf、otf、woff、woff2,需要注意,css 中的 font-family 值可以随意取,这个名字不是字体真正的名字。字体真正的名字(font-family),也就是注册到系统中的名字是保存在字体二进制文件中的。你需要确保你使用的字体的真正名字(font-family)足够特殊,否则在向系统注册时可能发生冲突,导致注册失败,你的字符被显示为‘?’。如果你使用 [http://www.iconfont.cn/](http://www.iconfont.cn/) 来构建你的 iconfont。确保在项目设置中,设置一个特殊的 font-family 名字。默认是 “iconfont”,极大可能发生冲突。
W
wanganxp 已提交
32 33 34 35
- web: 支持的字体取决于浏览器,详见mdn或caniuse

自定义字体的加载,除了在css的src中设置,也可以使用API [uni.loadFontface](../api/load-font-face.md)

W
x  
wanganxp 已提交
36 37

### App平台差异
W
wanganxp 已提交
38
- font-family 样式不支持继承,每层组件都需要设样式
D
DCloud_LXH 已提交
39

W
wanganxp 已提交
40
<!-- CSSJSON.font-family.reference -->
D
DCloud_LXH 已提交
41

DCloud_iOS_XHY's avatar
DCloud_iOS_XHY 已提交
42
[示例代码](https://gitcode.net/dcloud/hello-uni-app-x/-/blob/master/pages/CSS/text/font-family.uvue)