微信小程序字体设置

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

index.wxml中代码

<view class="postion">
  <view class="font-settings">字体设置</view>
</view>

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中代码

<view class="font-color-gradation">字体颜色渐变</view>

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中代码

<view class="view">动态字体颜色</view>

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;}
}

 

效果