微信小程序开发基础 字体样式和文本样式的设置
·
微信小程序页面主要有4个页面,分别是:
js页面、json页面,wxml页面、wxss页面
他们的功能分别是:
js:页面逻辑文件
json:页面配置文件
wxml:页面描述文件
wxss:页面样式表文件
各种字体样式属性命名及其含义:
属性名称 | 含义 | 说明 |
---|---|---|
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属性设置字体样式,在index.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>
/**index.wxss**/
.fontStyle{
font-family: cursive;
font-size: 25px;
font-style: italic;
font-weight: bold;
}
/**app.wxss**/
.box{
border: 1px solid silver;
margin: 20rpx;
padding: 20rpx;
}
.title{
font-size: 25px;
text-align: center;
margin-bottom: 15px;
color:palevioletred;
}
view组件支持使用 style、class 属性来设置组件的样式,静态的样式一般写到 class 中,动态的样式一般写到 style 中,这样可以提高渲染速度。
class引用的样式类可以在index.wxss和app.wxss中定义。
在app.wxss中定义的样式类属于全局样式类,可以在项目的任何文件中使用。
在index.wxss中定义的样式类一般只在index.wxml中使用。
各种文本属性命名及其含义:
属性名称 | 含义 |
---|---|
color | 字体颜色 |
text-align | 文本的对齐方式 |
text-indent | 首行缩进 |
letter-spacing | 字母之间的距离 |
word-spacing | 单词间距,以空格来区分单词 |
white-space | 文档中的空白处 |
text-decoration | 文本修饰样式 |
text-decoration-color | 文本修饰颜色 |
样例图:
各页面源代码:
<!--index.wxml-->
<view class="box">
<view class="title">文本样式设置</view>
<view class="textStyle01">
风急天高猿啸哀,渚清沙白鸟飞回。
无边落木萧萧下,不尽长江滚滚来。
万里悲秋常作客,百年多病独登台。
艰难苦恨繁霜鬓,潦倒新停浊酒杯。
</view>
============================
<view class="textStyle02">
single spark can start a prairie fire,single spark can start a prairie fire,single spark can start a prairie fire,single spark can start a prairie fire.
</view>
</view>
/**app.wxss**/
.box{
border: 1px solid silver;
margin: 20rpx;
padding: 20rpx;
}
.title{
font-size: 25px;
text-align: center;
margin-bottom: 15px;
color:palevioletred;
}
/**index.wxss**/
.textStyle01 {
color: #00f;
letter-spacing: 10px;
text-align: left;
text-indent: 50px;
text-decoration: underline;
text-decoration-color:aqua;
line-height: 30px;
white-space: normal;
}
.textStyle02{
text-align: justify;
word-spacing: 20px;
text-transform: uppercase;
white-space: pre-wrap;
}
更多推荐
已为社区贡献3条内容
所有评论(0)