微信小程序如何设置字体样式
导读:本文共1919.5字符,通常情况下阅读需要6分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: 一.前言我们的目标是做出以下效果。在实现上图效果之前,首先要掌握一些基本知识。view组件支持使用style、class属性来设置组件的样式。class引用的样式类可以在index.wxss以及app.wxss中定义。在前者中定义的样式,一般只能在该页面内使用;而在后者当中定义的样式是全局样式,可在项目的任何页面中使用。二.案例实现1.编写index.wxml代... ...
目录
(为您整理了一些要点),点击可以直达。一.前言
我们的目标是做出以下效果。
在实现上图效果之前,首先要掌握一些基本知识。
view组件支持使用style、class属性来设置组件的样式。class引用的样式类可以在index.wxss以及app.wxss中定义。在前者中定义的样式,一般只能在该页面内使用;而在后者当中定义的样式是全局样式,可在项目的任何页面中使用。
二.案例实现
1.编写index.wxml代码
代码中使用了view组件的style和class属性来设置字体样式。
其中,style是直接在标签内部进行设置,而class需要在wxss文件中定义样式类,然后在wxml中引用。(可以理解为这里编写了一个函数,而函数的具体定义需要到另一个文件当中编写)
.box和.title分别是用来设置边框和标题样式的,在app.wxss中定义,是全局样式,可以在项目内任何wxml文件中使用。
font-style和font-size是用来设置字体样式属性的。常用字体样式属性还有:
属性含义属性值举例font-family字体类型serif,cursive,隶书,宋体...font-size字体大小6px/rpx/cm,large,small...font-style字体倾斜italic,normal,oblique...font-weight字体粗细bold,bolder,lighteer...以下是index.wxml文件
<!--index.wxml--><viewclass='box'><viewclass='title'>字体样式设置</view><viewstyle='font-family:"隶书";font-size:30px;'><view>利用style设置字体样式</view><view>字体:隶书,30像素</view></view>============================<viewclass='fontStyle'><view>利用class设置字体样式:</view><view>字体:Cursive、25像素、倾斜、加粗</view></view></view>
2.编写app.wxss文件代码代码
在app.wxss中,我们将定义.box和.title两种全局样式
/**app.wxss**/.box{/**定义用于设置边框的样式**/margin:20rpx;/**外边距**/padding:20rpx;/**内边距**/border:1pxsolidsilver;/**边框1px、实线、银灰色**/}.title{font-size:25px;/**字体大小**/text-align:center;/**居中对齐**/margin-bottom:15px;/**下边距**/color:red;/**红色**/}
3.编写index.wxss文件代码
我们将在该文件中定义.fontStyle样式类,该样式类只能在index.wxml中被使用。
.fontStyle{font-family:Cursive;/**字体类型**/font-size:25px;/**字体大小**/font-style:italic;/**字体倾斜**/font-weight:bold;/**字体加粗**/}
三.代码编译
编写完以上所有代码后,点击“编译”或者按下快捷键ctrl+s,即可看到模拟期中的运行效果
结尾ps:
在使用style和class属性来设置组件样式的时候,要具体情况具体分析。静态的样式一般写到class中,动态的样式一般写到style中。这样做的目的是提高不同情况下代码的编辑性以及提高渲染速度。
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
微信小程序如何设置字体样式的详细内容,希望对您有所帮助,信息来源于网络。