font-family

■ 定义

font-family属性用于设置文本的字体系列

■ 使用说明

font-family属性的各属性值(字体)之间必须使用英文状态下的逗号 "," 隔开

一般情况下,如果有空格隔开的多个单词组成的字体,要加单引号括起来,如‘Microsoft YaHei’

尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正常显示

最常见的几个字体,即

body {font-family:'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB';}

当有多个字体时,会优先选择使用第一个字体,如果第一个字体没有,则选择第二个,以此类推,如果所有列出的字体都没有,则选择浏览器默认的字体,即'Microsoft YaHei'

不要使用太复杂,偏门的字体,尽量使用常用字体

■ 示例

p {
    font-family:"微软雅黑";
}

div {
    font-family:Arial,"Microsoft Yahei","微软雅黑";
}
### 如何在 UniApp 中使用 `font-family` 在 UniApp 开发中,`font-family` 是一种用于定义文字样式的 CSS 属性。通过设置 `font-family`,可以自定义应用中的字体样式以满足设计需求。 #### 使用方式 1. **全局配置** 可以在项目的根目录下的 `app.vue` 文件中定义全局的 `font-family` 样式[^2]。这样所有的页面都会继承该样式。 ```vue <style> body { font-family: 'Arial', sans-serif; } </style> ``` 2. **局部配置** 如果只需要特定组件或页面应用某个字体,则可以在对应的 `.vue` 文件中单独定义。 ```vue <template> <view class="custom-font">这是一个自定义字体的文字</view> </template> <style> .custom-font { font-family: 'Times New Roman', serif; } </style> ``` 3. **引入外部字体文件** 当需要使用特殊的字体时,可以通过 @font-face 来加载并使用这些字体。 ```css @font-face { font-family: 'MyCustomFont'; src: url('/path/to/font.ttf') format('truetype'); } .custom-text { font-family: 'MyCustomFont', serif; } ``` 4. **动态修改** 利用 CSS 变量的功能,在运行时更改 `font-family` 的值也是可行的方式之一。 ```css :root { --main-font: 'Helvetica Neue', sans-serif; } body { font-family: var(--main-font); } ``` #### 注意事项 - 确保所使用的字体已获得合法授权,并正确上传到项目资源路径下。 - 对于某些特殊字符的支持情况需提前测试确认,避免因字体缺失造成显示异常。 ```javascript // 动态切换字体示例代码 document.documentElement.style.setProperty('--main-font', "'Courier New', monospace"); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值