font-family

uni-app x 兼容性

语法

font-family 的属性值

展示全部

# font-family

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

# uni-app x 兼容性

Android	iOS	web
3.9	4.11	4.0

# 语法

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。

# 适用组件

# 兼容性

# font-family 的属性值兼容性

	Android	iOS	web
cursive	3.9	4.11	4.0
fantasy	3.9	4.11	4.0
monospace	3.9	4.11	4.0
sans-serif	3.9	4.11	4.0
serif	3.9	4.11	4.0

# 浏览器兼容性

	Chrome	Edge	Firefox	Opera	Safari	IE
font-family	√（ 1 ）	√（ 12 ）	√（ 1 ）	√（ 3.5 ）	√（ 1 ）	√（ 3 ）

# 字体设置

对于系统中已经存在的字体，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

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