美文网首页
2021-11-08、文本字体样式引入及其设置

2021-11-08、文本字体样式引入及其设置

作者: 疋瓞 | 来源:发表于2021-11-08 11:18 被阅读0次

    1、如何将微信小程序当中同一项目中其他文件的样式导入到当前文件样式当中?

    方法:@import'其他文件样式(wxss)路径';
    例子:@import '../dem_0/dem_0.wxss';

    2、微信小程序中文和英文文本设置

    2.1、中文文本设置

    wxml:

    <view class="title">文本样式设置</view>
        <view class="style01">
            <text>设置文本颜色,设置文本对齐方式,设置文本缩进,设置字母间距,设置文档中的空白处,设置文本修饰样式,设置文本修饰颜色。</text>
        </view>
    

    wxss:

    .style01{
        color:red;
        letter-spacing: 5px;
        text-align: left;
        text-indent: 50px;
        text-decoration: underline;
        text-decoration-color: #00f;
        line-height: 30px;
        white-space: normal;
    }
    

    2.2、英文文本设置

    wxml:

    <view class="style02">
            <text>
            color text-align text-indent letter-spacing word-spacing white-space text-decoration text-decoration-color
            </text>
     </view>
    

    wxss:

    .style02{
        text-align: justify;
        word-spacing: 20px;
        text-transform: uppercase;
        white-space: pre-wrap;
    }
    

    3、总结:

    3.1、用到的字体属性说明

    • color:字体颜色

    • letter-spacing: 中文字体间隔

    • word-spacing: 英文字体间隔

    • text-align: 字体对齐方式


      text-align当中的参数设置
    • text-indent: 字体缩进

    • text-decoration: 字体修饰


      text-decoration的参数.jpg
    • text-decoration-color: 字体修饰的颜色

    • line-height: 行间距

    • white-space: 空白部分设置(字体中原有的空格,换行等)


      white-space参数设置.jpg

    3.2、案例展示

    案例展示.jpg

    相关文章

      网友评论

          本文标题:2021-11-08、文本字体样式引入及其设置

          本文链接:https://www.haomeiwen.com/subject/ctcuzltx.html