【微信小程序开发】字体样式设置

这篇具有很好参考价值的文章主要介绍了【微信小程序开发】字体样式设置。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

一.前言

二.案例实现

1.编写index.wxml代码

2.编写app.wxss文件代码代码

3.编写index.wxss文件代码

三.代码编译


一.前言

本篇文章将介绍在设计微信小程序时,利用style和class两种方式来设置字体样式的方法。

我们的目标是做出以下效果。

微信小程序字体粗细border,微信小程序开发,微信小程序,小程序,javascript

在实现上图效果之前,首先要掌握一些基本知识。

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-->
<view class='box'>
  <view class='title'>字体样式设置</view>
  <view style='font-family: "隶书";font-size: 30px;'>
    <view>利用style设置字体样式</view>
    <view>字体:隶书,30像素</view>
  </view>
  ============================
  <view class='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: 1px solid silver;   /**边框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,即可看到模拟期中的运行效果

微信小程序字体粗细border,微信小程序开发,微信小程序,小程序,javascript

 结尾ps:

在使用style和class属性来设置组件样式的时候,要具体情况具体分析。静态的样式一般写到class中,动态的样式一般写到style中。这样做的目的是提高不同情况下代码的编辑性以及提高渲染速度。文章来源地址https://www.toymoban.com/news/detail-782782.html

到了这里,关于【微信小程序开发】字体样式设置的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序:设置字体跟随手机系统

    小程序开发:全局设置跟随手机系统默认字体 最近在开发一款微信小程序,发现字体不是跟随手机系统设置的字体,这样对用户很不友好,通过下面这行代码,就可以将页面的字体搞成系统默认字体了。 提示:要设置在app.wxss里面 代码如下: 以上就是今天分享的内容啦~ ❤️

    2024年02月13日
    浏览(123)
  • 【微信小程序】文章样式,标题样式,及设置背景~

    | background-size  设置背景图片大小。图片可以保有其原有的尺寸,或者拉伸到新的尺寸,或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。 | background-size: cover;适配屏幕大小 文章样式,标题样式,及设置背景~ index.wxml app.wxss index.scss 注意: 微信小程序中不支持直接

    2024年02月07日
    浏览(42)
  • 微信小程序设置input框placeholder的字体大小

    给input框绑定 placeholder-class=\\\"placeholder-style\\\"这个属性。 绑定属性    设置样式  

    2024年02月16日
    浏览(48)
  • CSS:浏览器设置placeholder样式 / 微信小程序设置placeholder样式

    一、web 设置placeholder 设置浏览器的placeholder样式 二、微信小程序设置placeholder 在小程序中设置placeholder样式需要使用组件的内置属性。可以通过以下方式设置input和textarea的placeholder样式: 在上面的示例中,placeholder-style属性被设置为一个字符串,包含了CSS样式。在这个字符串

    2024年02月04日
    浏览(58)
  • 微信小程序 | 小程序开发

    🖥️ 微信小程序专栏:小程序开发 初级知识 🧑‍💼 个人简介:一个不甘平庸的平凡人🍬 ✨ 个人主页:CoderHing的个人主页 🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️ 👉 你的一键三连是我更新的最大动力❤️ 目录 一、认识小程序开发 什么是小程序? 各个平台小

    2024年01月24日
    浏览(61)
  • 【微信小程序】边框的多种样式设置及效果

    一、实线(solid) 实线边框。  二、虚线( dashed ) 虚线边框。 三、点线(dotted)  点线边框。  四、双线(double) 双线边框。  五、凹陷(groove) 凹陷的边框。  六、凸起(ridge) 凸起的边框。  七、内嵌(insert) 内嵌边框。  八、外嵌(outset) 外嵌边框。  

    2024年02月07日
    浏览(49)
  • 微信小程序开发之微信小程序交互

    目录 一、小程序交互 前端: 1、先在登陆界面中编写代码 2、在前端中编写js代码 后端:           1、先导入依赖:           2、定义好配置文件           3、编写好实体类           4、将帮助类进行配置           5、编写mapper类           6、定义service层以及对应的

    2024年02月09日
    浏览(53)
  • matlab如何设置横纵坐标轴的字体粗细

    网上的介绍真是良莠不齐,终于自己摸索出来!!! 1,如果要把图例标注的文字加粗,则在legend1参数里面 2,如果只要把x轴刻度加粗,那就更改xlabel里面的参数\\\'fontweight\\\',\\\'bold\\\' 3,如果只要把y轴刻度加粗,那就更改ylabel里面的参数\\\'fontweight\\\',\\\'bold\\\' 可能代码不够完整,这个是我数

    2024年02月11日
    浏览(38)
  • 微信小程序 -- 小程序开发能力与拓展

    1. 获取用户头像 当小程序需要让用户完善个人资料时,我们可以通过微信提供的头像、昵称填写能力快速完善。如图: 想使用微信提供的头像填写能力,需要两步: 将 button 组件 open-type 的值设置为 chooseAvatar 当用户选择需要使用的头像之后,可以通过 bindchooseavatar 事件回调

    2024年04月15日
    浏览(61)
  • 【微信小程序开发零基础入门】——微信小程序入门

    学习小程序跟学习网页开发有什么不同 1.如何创建微信小程序项目 1.1 注册、登录、复制appId 注册:在 https://mp.weixin.qq.com/cgi-bin/wx 进行注册微信小程序开发账号 登录:在 https://mp.weixin.qq.com 登录小程序账号 复制appId: 在 \\\"开发\\\" 的 \\\"开发管理\\\" 的 \\\"开发设置\\\" 的 \\\"开发者ID\\\"中 1.2 下

    2024年02月03日
    浏览(60)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包