常见设计稿字体对应字重font-weight大小

在拿到 UI 设计稿时,可以经常看设计稿中常见的字体有 PingFangSC-RegularPingFangSC-MediumPingFangSC-Bold,并不会直接给我们 font-weight 的值。在这我们就需要知道常见字体和 font-weight 的对应关系

Pingfang SC 有六个字重,设计师经常会用 Pingfang SC Medium 字体,大概很多人会忽略它,直接设 font-weight: bold,但是对于 Pingfang SC 字体,设成 bold 其实变成了 Pingfang SC SemiboldPingfang SC Medium 的字重是 500。

详细可以看 font-weight 的介绍 传送门

font-weight 属性执行字体中字形的重量,这取决于黑度等级或笔划粗细,其值的意义如下:

这些有序排列中的每个值,表示至少与其起身拥有相同黑度的重量。其大致符合下列通用重量名称:

  • 100 - Thin
  • 200 - Extra Light (Ultra Light)
  • 300 - Light
  • 400 - Regular (Normal、Book、Roman)
  • 500 - Medium
  • 600 - Semi Bold (Demi Bold)
  • 700 - Bold
  • 800 - Extra Bold (Ultra Bold)
  • 900 - Black (Heavy)
### 微信小程序个人中心页面开发教程 #### 1. 页面布局与设计 在开发微信小程序的个人中心页面之前,需要先将UI设计图转化为实际可用的小程序代码。通常情况下,设计师会提供基于iPhone6尺寸的设计稿[^2],因此可以按照其标准来设置页面的比例和单位。为了适配不同设备,推荐使用`rem`作为单位,并通过动态计算根字体大小的方式实现响应式布局。 以下是基本的WXML结构示例: ```html <view class="container"> <view class="header"> <image src="/images/avatar.png" class="avatar"></image> <text class="username">用户名</text> </view> <view class="section"> <navigator url="/pages/profile/profile" class="item"> <text>个人信息</text> <icon type="arrowright" size="18" color="#999"/> </navigator> <navigator url="/pages/settings/settings" class="item"> <text>设置</text> <icon type="arrowright" size="18" color="#999"/> </navigator> </view> </view> ``` 对应的WXSS样式文件如下所示: ```css /* 动态调整根字体 */ @import "./reset.wxss"; .container { font-size: 12px; /* 基础字体大小 */ } .header { display: flex; align-items: center; padding: 20rpx; background-color: #f7f7f7; } .avatar { width: 100rpx; height: 100rpx; border-radius: 50%; margin-right: 20rpx; } .username { font-size: 32rpx; font-weight: bold; } .section .item { display: flex; justify-content: space-between; align-items: center; padding: 20rpx; border-bottom: 1rpx solid #eaeaea; } ``` #### 2. 数据交互与接口对接 除了静态界面外,还需要从前端调用后端API获取用户的个性化数据并显示出来。例如,在加载页面时可以通过`onLoad`生命周期函数发起网络请求,获取当前登录用户的头像、昵称以及其他相关信息[^1]。 下面是一个简单的JS逻辑实例: ```javascript Page({ data: { userInfo: {} }, onLoad(options) { this.fetchUserInfo(); }, fetchUserInfo() { wx.request({ url: 'https://example.com/api/user', // 替换为真实接口地址 method: 'GET', success(res) { const { avatar, username } = res.data; this.setData({ userInfo: { avatar, username } }); }, fail(err) { console.error('Failed to load user info:', err); } }); } }); ``` #### 3. 调试与优化 完成初步编码之后,应进行全面的功能测试以及性能优化工作。这一步骤包括但不限于检查各个控件是否正常运行、图片资源能否成功加载等问题;另外还需关注应用启动速度等方面的表现情况。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值