解决font property font-family does not have generic default

解决font property font-family does not have generic default

当CSS如下时

body {
    font-family:"Helvetica","Arial";
}

出现错误:
Font property font-family does not have generic default

原因为没有定义 “generic-family”即 字体的所属风格。


解决办法:

font-family末尾处添加字体所属风格,如serifsans-serif

将CSS修改如下:

body {
    font-family:"Helvetica","Arial",serif;
}

最后一项serif为默认风格字体,如果之前指定的字体都没有找到,就使用浏览器的默认serif字体。各浏览器的默认风格字体可能不相同。其他的字体系列还有monospacefantasycursive

更多详细的信息请点击查看相关W3C文档

### 如何在 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"); ```
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值