小程序随意设置字体粗细(一行代码)

随意设置字体粗细，不局限于小程序

在小程序或者其它地方使用`font-weight`时（情景`了解`）

font-weight: 设置文本字体的粗细。取值范围为100-900
normal: 默认值相当于400、bold: 粗体相当于 700

然而在实际的过程中，我设置100-900的时候

100~300: 显示为细
400~500：为默认值
600~900：显示为粗体

当我们想娶一个理想的值时，表示很头疼

使用`-webkit-text-stroke-width`定义文字描边的厚度(`重点`)

`wxml` 文件

<view class="lighter">字体的粗细情况(细体100~300)</view>
<view class="normal">字体的粗细情况(默认400~500)</view>
<view class="bold">字体的粗细情况(加粗600~900)</view>
<view class="a1">字体的粗细情况(0.1px)</view>
<view class="a2">字体的粗细情况(0.2px)</view>
<view class="a3">字体的粗细情况(0.3px)</view>
<view class="a4">字体的粗细情况(0.4px)</view>
<view class="a5">字体的粗细情况(0.5px)</view>
<view class="a6">字体的粗细情况(0.6px)</view>
<view class="a7">字体的粗细情况(0.7px)</view>
<view class="a8">字体的粗细情况(0.8px)</view>
<view class="a9">字体的粗细情况(0.9px)</view>

`wxss` 文件

.a1{-webkit-text-stroke-width: 0.1px
}
.a2{-webkit-text-stroke-width: 0.2px
}
.a3{-webkit-text-stroke-width: 0.3px
}
.a4{-webkit-text-stroke-width: 0.4px
}
.a5{-webkit-text-stroke-width: 0.5px
}
.a6{-webkit-text-stroke-width: 0.6px
}
.a7{-webkit-text-stroke-width: 0.7px
}
.a8{-webkit-text-stroke-width: 0.8px
}
.a9{-webkit-text-stroke-width: 0.9px
}

虽然可以实现字体的随意加粗，但显示出来的字体可以不够清晰，故这不是理想的实现方式，不过这不为是一种是最简单的一种字体加粗方式

如果对你有所不一样的认知提升是否可以留下一点你来过的痕迹

小程序随意设置字体粗细(一行代码)相关推荐

微信小程序：设置字体跟随手机系统
小程序开发:全局设置跟随手机系统默认字体前言最近在开发一款微信小程序,发现字体不是跟随手机系统设置的字体,这样对用户很不友好,通过下面这行代码,就可以将页面的字体搞成系统默认字体了. 提示:要设置 ...
小程序 canvas 设置字体字号加粗
之前的版本使用现在直接使用CanvasContext.font即可例如 this.ctx2.font = 'normal bold 40px sans-serif';
微信小程序使用base64字体图标（生成字体图标+将字体图标转为base64格式）
问题: 1.微信小程序不能随意使用网络资源,如字体,css文件等 2.不能在小程序中使用字体文件 3.不能使用background-position背景图片定位来使用内部png图片下面就介绍一下如何 ...
小程序云开发获取手机号完整代码云函数中网络请求第三方接口
小程序云开发获取手机号完整代码效果图: 小程序代码 <button open-type="getPhoneNumber" bindgetphonenumber=" ...
微信小程序可以加服务器上的字体,微信小程序中自定义字体
微信小程序支持自定义字体开放出来也有段时间,这边整理下使用自定义字体中,容易忽略的一些问题,和简便的全局自定义方式.如果是同时加载两种字体包,先下载下来的会被后下载下来的字体包给覆盖. 官网接口文档 ...
C# .Net 小程序消息推送配置+详细代码
C# .Net 小程序消息推送配置+详细代码首先在微信公众平台登录小程序账号第一步登陆登录后,在首页-功能-订阅信息,打开后如未进行配置,需要进行后台配置. 第二步:填写服务器 ...
微信小程序开发——设置默认图片、错误加载图片
wxml: <image src='{{imgArr[index]==""?defaultImg:imgList[index]}}' binderror="erro ...
php过滑码,小程序中多滑块的实现代码
本篇文章给大家带来的内容是关于小程序中多滑块的实现代码 ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 最近在用原生的代码开发小程序,需要用到多滑块的slider,但是官方的api只 ...
微信小程序使用wxParse解析渲染html代码片段
最近项目中一个遇到需求,就是在微信小程序里,需要显示html代码片段内容,内容是通过接口读取的服务器中的富文本内容,是html代码片段,小程序默认是不支持html格式的内容显示的,会被认为是Objec ...

小程序随意设置字体粗细(一行代码)

随意设置字体粗细，不局限于小程序

在小程序或者其它地方使用`font-weight`时（情景`了解`）

使用`-webkit-text-stroke-width`定义文字描边的厚度(`重点`)

`wxml` 文件

`wxss` 文件

小程序随意设置字体粗细(一行代码)相关推荐

最新文章

热门文章

小程序随意设置字体粗细(一行代码)

随意设置字体粗细，不局限于小程序

在小程序或者其它地方使用font-weight时（情景了解）

使用-webkit-text-stroke-width定义文字描边的厚度(重点)

wxml 文件

wxss 文件

小程序随意设置字体粗细(一行代码)相关推荐

最新文章

热门文章

在小程序或者其它地方使用`font-weight`时（情景`了解`）

使用`-webkit-text-stroke-width`定义文字描边的厚度(`重点`)

`wxml` 文件

`wxss` 文件