初识微信小程序字体样式设置

设计一个小程序，分别利用style和class属性设置字体样式，在index.wxss中定义样式类。所有的文字都包含在一个边框内，边框内上方有标题文字，边框和标题样式利用class属性来设置，在app.wxss中定义样式类。

<!--index.wxml-->
<view class='box'><view class='title'>字体样式设置</view><view style='font-family:sans-serif;font-size:30px;'><view>利用Style设置字体样式：</view><view>字体：sans-serif,30像素</view></view>=============<view class='fontStyle'><view>利用class设置字体样式：</view><view>字体：Cursive、25像素、倾斜、加粗</view></view>
</view>

/**app.wxss**/
.box{border:1px solid silver;margin: 20rpx;padding: 20rpx;
}.title{font-size: 25px;text-align: center;margin-bottom: 15px;color: red;
}

/**index.wxss**/
.fontStyle {font-family: cursive;font-size: 25px;font-style: italic;font-weight: bold;
}

属性名称	含义	说明
font-family	字体类型	Serif、Sans-serif、Monospace、Cursive、Fantasy
font-size	字体大小	5px/rpx/cm、large、small、medium、larger、smaller
font-style	字体倾斜	italic、normal、oblique
font-weight	字体加粗	bold、bolder、lighter

利用style和class设置字体样式

view组件支持使用style、class属性来设置组件的样式。
利用style可直接在WXML文件中设置，利用class需要先在WXSS文件中定义样式类。
静态样式一般使用class设置，动态样式一般使用style设置，这样可以提高渲染速度。

在index.wxss和app.wxss中定义样式类

在app.wxss中定义的样式类属于全局样式类，可以在项目的任何文件中使用。
在index.wxss中定义的样式类一般只在index.wxml中使用。

初识微信小程序字体样式设置相关推荐

初识微信小程序文本样式设置
创建一个微信小程序,利用class属性设置文本样式,包括:文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等  <view class= ...
微信小程序text设置高度_微信小程序字体样式的设置
知识点: 1.常用字体样式属性 2.利用style和class 设置字体样式 3.在app.wxss 和 index.wxss中定义样式常用字体属性: 举列: 项目目录: 运行结果: 在index. ...
uni-app微信小程序动态样式设置；微信小程序style行内式无效；微信小程序style行内式编译报错；微信小程序:style设置样式
场景:微信小程序设置动态样式,有些时候是需要用到变量来书写的:但是实际使用发现,行内式书写虽然有效,但是会使得微信小程序的编辑失败:故需要使用动态的v-bind来写动态变量行内式样式(既使用:styl ...
微信小程序——动态样式设置
当我们想根据不同的条件值,展示不同的页面效果.那就需要动态设置样式案例如下: index.wxml: <button bindtap="set"> 设置 </b ...
微信小程序字体设置教程
准备字体文件下载一个 .ttf 类型的字体文件, 备用戳这里下载获取字体文件地址微信开发者工具>云开发存储>存储管理>上传文件>点击文件名>复制下载地址项目引入 ...
PHP:【微信小程序】初识微信小程序，微信小程序配置
PHP:[微信小程序]初识微信小程序,微信小程序配置一.介绍小程序提供了一个简单.高效的应用开发框架和丰富的组件及 API,帮助开发者在微信中开发具有原生 APP 体验的服务小程序是一种全新的连 ...
《微信小程序-基础篇》初识微信小程序
大家好,好久不见了,前段时间各种原因分享不稳定,后面一段时间内参与了主站的原力计划,请麻烦各位支持一下,万分感谢- 本系列将从零开始介绍微信小程序的开发,介绍完基础以后会实际同步开发一个微信小程序的项 ...
微信小程序中如何设置textarea或者van-field中的placeholder换行显示
微信小程序中如何设置textarea中的placeholder换行显示 van-field 中直接修改textarea 标签的样式即可 <textarea class="txt_wor ...
微信小程序CSS样式图片闪烁
微信小程序CSS样式图片闪烁微信小程序直接用CSS样式让图片闪烁起来!!! 废话不多说!直接上代码 // 这是设置小程序WXSS页面 .shanshuo{-webkit-animation: twi ...
微信小程序动态更改标题栏_微信小程序实现动态设置页面标题的方法【附源码下载】...
本文实例讲述了微信小程序实现动态设置页面标题的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① WXML文件标题1 标题2 标题3 还原 ② JS文件 Page({ // 设置 ...

初识微信小程序字体样式设置

初识微信小程序字体样式设置相关推荐

最新文章

热门文章

初识微信小程序 字体样式设置

初识微信小程序 字体样式设置相关推荐

最新文章

热门文章

初识微信小程序字体样式设置

初识微信小程序字体样式设置相关推荐