Как установить ограничения на внешние края переменных шрифтов? - PullRequest
Новая
       13

Как установить ограничения на внешние края переменных шрифтов?

1 голос
/ 04 июля 2019

Я создаю свой первый переменный логотип для клиента, используя HTMl & CSS. Я создал эффект, который хочу, первая буква расширяется как вторая, но контракты; внешние края моих персонажей также слегка двигаются внутрь и наружу. Что я сделал не так, чтобы это произошло, или что я могу добавить, чтобы зафиксировать точки внешних краев, чтобы это не происходило?

CodePen 

.em-tight { letter-spacing: -1.5em; }
@font-face {
  font-family: 'etc-trispace';
  src: url(data:font/woff2;base64,d09...) format('woff2-variations');
}

body {
font-family: 'etc-trispace';
text-rendering: geometricPrecision;
margin: 10vh auto;
text-align: center;
overflow: hidden;
}

@keyframes bigger {
0%   {font-variation-settings: "wght" 200, "wdth" 50 ; }
25%   {font-variation-settings: "wght" 200, "wdth" 200; }
50%   {font-variation-settings: "wght" 200, "wdth" 200; }
75%   {font-variation-settings: "wght" 200, "wdth" 50;  }
100% {font-variation-settings: "wght" 200, "wdth" 50 ;}
    }

p span {
    animation: bigger infinite;
    animation-duration: 5s;
    animation-timing-function: ease;
    font-size: 40vh;
    margin: 0 auto;
    line-height: 1;
    font-weight: normal;
    }

p span:nth-child(2) {
animation-delay: 2.5s
}
...