可变字体linux,CSS可变字体

css

@font-face {

font-family: 'Decovar Regular24';

src: url("//www.jq22.com/gxwj/Decovar-VF.ttf");

}

h1 {

margin: 0;

font-size: 20vw;

font-family: "Decovar Regular24";

color: white;

font-variation-settings: 'SSTR' 1000;

-webkit-animation: loadin 4s infinite linear forwards;

animation: loadin 4s infinite linear forwards;

}

@-webkit-keyframes loadin {

0% {

font-variation-settings: 'SSTR' 1000;

}

50% {

font-variation-settings: 'SSTR' 0;

}

}

@keyframes loadin {

0% {

font-variation-settings: 'SSTR' 1000;

}

50% {

font-variation-settings: 'SSTR' 0;

}

}

html {

height: 100%;

}

body {

background: rgba(160, 160, 160, 0.1);

overflow: hidden;

height: 100%;

}

h1 {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

width: 100%;

height: 100%;

text-align: center;

-webkit-transform: translateZ(0);

transform: translateZ(0);

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.7), 1px -1px 0 rgba(255, 255, 255, 0.7), -1px 1px 0 rgba(255, 255, 255, 0.7), 1px 1px 0 rgba(255, 255, 255, 0.7), -1px 2px 1px #a0a0a0, -2px 4px 2px #a0a0a0, -3px 6px 3px rgba(160, 160, 160, 0.6), -4px 8px 4px rgba(160, 160, 160, 0.5), -5px 10px 5px rgba(160, 160, 160, 0.4), -6px 12px 6px rgba(160, 160, 160, 0.3), -7px 13px 7px rgba(160, 160, 160, 0.2), -8px 15px 8px rgba(160, 160, 160, 0.2), -9px 17px 9px rgba(160, 160, 160, 0.2), -10px 19px 10px rgba(160, 160, 160, 0.2), -11px 20px 11px rgba(160, 160, 160, 0.1), -12px 22px 12px rgba(160, 160, 160, 0.1), -13px 24px 13px rgba(160, 160, 160, 0.1), -14px 26px 14px rgba(160, 160, 160, 0.1), -15px 28px 15px rgba(160, 160, 160, 0.1), -16px 30px 16px rgba(160, 160, 160, 0.1), -17px 32px 17px rgba(160, 160, 160, 0.1), -18px 34px 18px rgba(160, 160, 160, 0.1), -19px 36px 19px rgba(160, 160, 160, 0.1), -20px 38px 20px rgba(160, 160, 160, 0.1), -21px 39px 21px rgba(160, 160, 160, 0.1);

}