Android进阶之路 - 字体加粗,定制化字体粗度

在客户端中不论是PC端,还是移动端主要价值之一就体现在用户交互方面,也就是用户体验了,接下来讲的是很常见的字体加粗问题

UI大找茬

在开发中经常会遇到设计说某个文本字体粗度不对,需要重一点,或者轻一点,这时候当系统控件原属性不满足需求时,就需要我们定制化处理一下

虽然看起来写了不少,但其实核心只在于获取当前控件的 Paint(画笔)后重新设置strokeWidth、style属性 ,然后重新绘制即可࿰

在微信小程序中给文本加粗是非常常见的需求,可以通过 CSS 的 `font-weight` 属性轻松实现。下面详细介绍几种常见的方式来为微信小程序中的字体加粗--- ### 方式一:直接在 WXML 中使用 inline-style 如果你只想对某一段文字单独设置加粗效果,可以直接在标签上通过 `style` 属性指定 `font-weight` 为 `bold` 或者具体的数值(如 `700` 表示更重的粗体)。 #### 示例代码: ```html <text style="font-weight: bold;">这是加粗的文字</text> ``` --- ### 方式二:定义全局或局部样式类名 如果希望多次复用某个特定样式的加粗效果,建议创建一个 `.css` 类并在需要的地方引用它。 #### WXSS 文件中定义样式: ```css .bold-text { font-weight: bold; } .heavy-text { font-weight: 900; /* 更加重的粗度 */ } ``` #### 在 WXML 引用该样式: ```html <text class="bold-text">这是一个加粗段落。</text> <text class="heavy-text">这是一段非常厚重的文字。</text> ``` --- ### 方式三:动态绑定样式 当是否需要加粗取决于某些条件时(例如用户选择与否),可以利用数据绑定技术动态地应用样式。 #### 数据绑定实例: ##### 页面 JSON 数据初始: ```json { "isBold": true, "fontWeightValue": "normal" } ``` ##### JS 控制逻辑: ```javascript Page({ data: { isBold: true, fontWeightValue: 'normal' }, toggleFontWeight() { // 切换粗细状态 this.setData({ isBold: !this.data.isBold, fontWeightValue: this.data.isBold ? 'bold' : 'normal' }) } }) ``` ##### 绑定至视图层: ```html <button bindtap="toggleFontWeight">切换字体粗细</button> <view style="font-weight: {{fontWeightValue}};"> 动态控制的字体粗细。 </view> ``` --- ### 总结提示 以上三种方式分别适用于不同场景下的字体加粗处理。第一种适合临时性的修改;第二种则更适合项目中有统一风格管理的情况;第三种则是为了应对那些基于业务逻辑变而改变外观的需求。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

远方那座山

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值