微信小程序在text文本实现多种字体样式

这篇文章主要介绍了微信小程序在text文本实现多种字体样式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

微信小程序比较特别，它的wxml只允许用自己家的标签，像那些span、div什么的统统不可以用，那如何在text文本加入不同的样式呢，在html里面我们可以添加一个span，再给那些span添加不同的class或者style就可以了，但小程序不可以，在text里面只允许在加入text，不可以加view等东西，所以我们可以按照它提供的，再加一个text就可以了，但是随之而来的还有一些bug，一般的我们都是直接某个class下面的text应用某些样式，如：

这样我们新加的text也会应用到那些样式了，导致整体样式的改变，解决方法是按照css里面提供的一个大于号>，像这样

这样子就可以了，大于号表示当前view下面一级的text，下下面的text不会应用到，具体的可以去查看微信小程序css手册里面的用法

再给那些span添加不同的class或者style就可以了，但小程序不可以，在text里面只允许在加入text，不可以加view等东西，

所以我们可以按照它提供的，再加一个text就可以了，但是随之而来的还有

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程序rich-text富文本用法实例分析

    本文实例讲述了微信小程序rich-text富文本用法.分享给大家供大家参考,具体如下: rich-text是一个新增的微信小程序插件,从基础库1.4.0开始,低版本需要做兼容处理 nodes属性可为Array和String类型,但推荐使用Array.由于String类型最终也会转为Array类型 nodes分为支持两种节点,分别为元素节点(type=node ,默认为元素节点)和文本节点(type=text) 元素节点 name 标签名 String 是 支持部分受信任的HTML节点 attrs

  • 详解小程序rich-text对富文本支持方案

    详解小程序rich-text对富文本支持方案

    小程序富文本解析 目前小程序使用比较多的富文本方案一个是小程序自带的rich-text组件,一个是wxPrase. wxPrase原理是把原有的html标签全部解析成小程序的组件,这样无论事件可控以及扩展性都是比较好的,但是对于行内渲染和多重渲染方面表现不是很好. 微信自带的rich-text组件刚好补足了wxPrase行内渲染和多重渲染方面表现方面的缺点,但是对于一些自定义的标签支持度不高并且会屏蔽元素所有事件,虽然支持直接解析html字符串,但是性能没有直接绑定json串好. 官网给的ric

  • 微信小程序使用字体图标的方法

    微信小程序使用字体图标的方法

    项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别.下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标. 第一步:下载需要的字体图标 进入阿里图标官网http://iconfont.cn/搜索自己想要的图标,如这里需要一个购物车的图标,流程为: 搜索"购物车"图标--->点击"添加入库"-->点击购物车进入购物车-->点击下载代码按钮. 点击下载代码,将得到名为download.zip的压缩包,解压

  • 详解mpvue小程序中怎么引入iconfont字体图标

    前言 iconfont阿里巴巴矢量图标库是我很喜欢的一个网站,可以下载/在线编辑/上传自己需要的矢量图标,也支持团队协作,那么在mpvue项目中如何引入呢? iconfont阿里巴巴矢量图标库 将图标加入购物车 搜索关键词可以是中文也可以是英文 下载素材 点击网站右上角的购物车图标,此处我们选第三个 ps:添加到项目很有用,可以在线编辑自己喜欢的图标大小样式/重命名/邀请成员等,此处我们选择加入项目并下载代码 文件解压 一般网页中为了兼容性考虑,我们会留下css/ttf/svg/woff/eot

  • 微信小程序 如何引入外部字体库iconfont的图标

    如何引入外部字体库iconfont的图标,具体如下 直接使用阿里巴巴的网络路径 选择iconfont图标 官网:阿里巴巴矢量字体库 步骤:阿里巴巴字体库使用方法 全局引入app.wxss @font-face { font-family: 'iconfont'; /* project id 518032 */ src: url('//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.eot'); src: url('//at.alicdn.com/t/fo

  • 在webstorm开发微信小程序之使用阿里自定义字体图标的方法

    1.下载阿里图标,解压出来之后有个.css文件 然后复制这css里面的所有代码 2.新建一个wxss文件,例如我新建的就是iconfont.wxss,然后把刚才复制的所有代码,复制到这个文件里面去. 3.在需要使用到图标的页面导入该wxss文件.例如: 这样在该wxml页面就可以使用图标了 总结 以上所述是小编给大家介绍的在webstorm开发微信小程序之使用阿里自定义字体图标 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持!

  • 微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】

    微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】

    本文实例讲述了微信小程序实现点击按钮修改字体颜色功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <view class="view" style="color:{{color}}">我是view标签</view> <view style="display:flex;"> <block wx:for="{{colorArray}}" wx:k

  • 微信小程序在text文本实现多种字体样式

    微信小程序在text文本实现多种字体样式

    这篇文章主要介绍了微信小程序在text文本实现多种字体样式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 微信小程序比较特别,它的wxml只允许用自己家的标签,像那些span.div什么的统统不可以用,那如何在text文本加入不同的样式呢,在html里面我们可以添加一个span,再给那些span添加不同的class或者style就可以了,但小程序不可以,在text里面只允许在加入text,不可以加view等东西,所以我们可以按照它提供的,再加一

  • 微信小程序 动态绑定事件并实现事件修改样式

    微信小程序 动态绑定事件并实现事件修改样式 实例代码 wxml <scroll-view class="reportTypeScroll" scroll-x="true" scroll-left="{{toLeftNum}}"> <block wx:for-items="{{reportTypeList}}" wx:key="{{index}}"> <text type=&qu

  • 微信小程序点击顶部导航栏切换样式代码实例

    微信小程序点击顶部导航栏切换样式代码实例

    这篇文章主要介绍了微信小程序点击顶部导航栏切换样式代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 类似这样的效果 <view class='helpCateList'> <!-- 类别 --> <scroll-view class='scroll-view' scroll-x="true"> <view class="item-content" wx:key=&qu

  • 微信小程序批量监听输入框对按钮样式进行控制的实现代码

    微信小程序批量监听输入框对按钮样式进行控制的实现代码

    在input组件上绑定data-model="xxx" bindinput="inputWatch",监听输入框输入: <input placeholder="请输入6~12位密码" name="password" value="{{password}}" data-model="password" bindinput="inputWacth" type=&qu

  • 微信小程序实现富文本图片宽度自适应的方法

    微信小程序实现富文本图片宽度自适应的方法

    引言:在微信小程序里,比如商品展示页面的商品详情会有图片展示,PC端设置的商品详情是PC端的宽度,所以在小程序里图片会显示不全,这时就应该做相应的处理,使小程序里图片显示正确 思路 把图片的宽度改为手机屏幕对应的宽度 微信小程序需要知道的知识 需要知道微信小程序里有自己的宽度标准,单位为rpx: 针对所有不同尺寸的浏览器,微信小程序里规定屏幕宽为750rpx: 解决 WXML <view class='html_detail'> <rich-text nodes='{{artical}}

  • 微信小程序解析富文本过程详解

    微信小程序解析富文本过程详解

    前言 最近公司在开发OTA微信小程序,一些页面的详情内容是HTML富文本格式的的,但是微信小程序不能直接解析HTML,需要将内容中的HTML标签转换成微信小程序所支持的标签. 开始的时候想过自己写方法来替换标签,后来找到了一个很好用的插件:WxParse. 今天分享给大家,Github地址:https://github.com/icindy/wxParse 使用WxParse解析富文本数据 1．将下载下来的插件文件夹复制到我们的项目根目录下(其中emojis文件可根据自己所需决定要或者不要,其他

  • 微信小程序 简单DEMO布局，逻辑，样式的练习

    微信小程序 简单DEMO布局，逻辑，样式的练习

    微信小程序 布局实例: 下面将会按照以下的顺序介绍: 布局的实现 逻辑的实现 样式的实现 1.布局的实现 最大的布局是view, view布局中包含了:一张图片,文字描述,信息栏和分界线 <!--最外层--> <view class="home-view1"> <!--图片层--> <view class="home-view2"> <image class="home-image1" src

  • 微信小程序实战项目之富文本编辑器实现

    微信小程序实战项目之富文本编辑器实现

    目录 前言 1. 实现效果 2. 创建发布页面,实现基本布局 3. 实现编辑区操作栏的功能 3.1. 实现文本加粗.斜体.文本下划线.左对齐.居中对齐.右对齐 3.2. 实现撤销.恢复.插入图片.删除操作 4. 参考 总结 前言 这是我参加掘金启航计划的第三篇文章,这次总结的是实现一个简单的富文本编辑器,相信阅读文章后,观众老爷们,能够实现富文本编辑器,在微信小程序中发布自己的文章,希望观众老爷们多多支持! 1. 实现效果 实现的效果如下图: 实现的功能点如下: 文本加粗.斜体.下划线,对齐方式

随机推荐