微信小程序设置字体无效_微信小程序字体设置

1.设置字体，大小，在容器中的位置

index.wxml中代码

字体设置

index.wxss中代码

.postion{

display: flex;

justify-content: center;

}

.font-settings {

/*字体设置*/

font-family: FZShuTi;/*方正舒体*/

font-size: 40px;

text-align: center;/*字体位置*/

color: red;

/*容器设置*/

background-color: green;

width: 300px;

height: 50px;

}

效果

2.字体颜色渐变

index.wxml中代码

字体颜色渐变

index.wxss中代码

.font-color-gradation2 {

font-size: 50px;

font-weight: bold;/*加粗*/

background: linear-gradient(to right, red, blue,green);/*左右渐变*/

-webkit-background-clip: text;

background-clip: text;

color: transparent;

}

效果

3.动态字体颜色

index.wxml中代码

动态字体颜色

index.wxss中代码

.view{

font-size: 50px;

width: 300px;

color: red;

-webkit-animation: discoloration 5s infinite;

animation: discoloration 5s infinite;

}

@keyframes discoloration {

50% {color: blue;}

80%{color: green;}

100%{color: yellow;}

}

效果