我试图弄清楚如何以与在此网站上完成相同的方式设置字体动画。
如果你开始滚动你可以看到动画的章节标题。这些标题的字体与正文字体相同，所以看起来他将字体转换为SVG路径并将其设置为动画，但我无法想象如何将我的字体转换成类似的东西。我得到了如何使其动画的基础知识（使用stroke-dasharray和stroke-dashoffset），但我不知道如何将字体转换为正确类型的路径。
我在Sketch中键入了一些单词并将它们转换为向量并导出到SVG，这就是我得到的。
<svg width="462px" height="36px" viewBox="0 0 462 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<path d="M0.032,35 L7.28,35 L7.28,13.208 L16.64,27.416 L16.832,27.416 L26.288,13.064 L26.288,35 L33.632,35 L33.632,1.4 L25.664,1.4 L16.832,15.608 L8,1.4 L0.032,1.4 L0.032,35 Z M41.696,35 L67.28,35 L67.28,28.424 L49.04,28.424 L49.04,21.368 L64.88,21.368 L64.88,14.792 L49.04,14.792 L49.04,7.976 L67.04,7.976 L67.04,1.4 L41.696,1.4 L41.696,35 Z M73.856,35 L99.44,35 L99.44,28.424 L81.2,28.424 L81.2,21.368 L97.04,21.368 L97.04,14.792 L81.2,14.792 L81.2,7.976 L99.2,7.976 L99.2,1.4 L73.856,1.4 L73.856,35 Z M113.84,35 L121.232,35 L121.232,8.216 L131.456,8.216 L131.456,1.4 L103.616,1.4 L103.616,8.216 L113.84,8.216 L113.84,35 Z M159.344,35 L166.736,35 L166.736,8.216 L176.96,8.216 L176.96,1.4 L149.12,1.4 L149.12,8.216 L159.344,8.216 L159.344,35 Z M182.624,35 L190.016,35 L190.016,21.512 L203.648,21.512 L203.648,35 L211.04,35 L211.04,1.4 L203.648,1.4 L203.648,14.696 L190.016,14.696 L190.016,1.4 L182.624,1.4 L182.624,35 Z M219.104,35 L244.688,35 L244.688,28.424 L226.448,28.424 L226.448,21.368 L242.288,21.368 L242.288,14.792 L226.448,14.792 L226.448,7.976 L244.448,7.976 L244.448,1.4 L219.104,1.4 L219.104,35 Z M265.664,35 L273.056,35 L273.056,24.92 L278.672,24.92 C286.208,24.92 292.256,20.888 292.256,13.112 L292.256,13.016 C292.256,6.152 287.408,1.4 279.392,1.4 L265.664,1.4 L265.664,35 Z M273.056,18.344 L273.056,8.072 L278.768,8.072 C282.464,8.072 284.768,9.848 284.768,13.16 L284.768,13.256 C284.768,16.136 282.608,18.344 278.912,18.344 L273.056,18.344 Z M291.488,35 L299.024,35 L302.096,27.464 L316.304,27.464 L319.376,35 L327.104,35 L312.704,1.16 L305.888,1.16 L291.488,35 Z M304.736,20.936 L309.2,10.04 L313.664,20.936 L304.736,20.936 Z M343.76,35.48 C351.008,35.48 356.096,31.736 356.096,25.064 L356.096,24.968 C356.096,19.112 352.256,16.664 345.44,14.888 C339.632,13.4 338.192,12.68 338.192,10.472 L338.192,10.376 C338.192,8.744 339.68,7.448 342.512,7.448 C345.344,7.448 348.272,8.696 351.248,10.76 L355.088,5.192 C351.68,2.456 347.504,0.92 342.608,0.92 C335.744,0.92 330.848,4.952 330.848,11.048 L330.848,11.144 C330.848,17.816 335.216,19.688 341.984,21.416 C347.6,22.856 348.752,23.816 348.752,25.688 L348.752,25.784 C348.752,27.752 346.928,28.952 343.904,28.952 C340.064,28.952 336.896,27.368 333.872,24.872 L329.504,30.104 C333.536,33.704 338.672,35.48 343.76,35.48 L343.76,35.48 Z M369.632,35 L377.024,35 L377.024,8.216 L387.248,8.216 L387.248,1.4 L359.408,1.4 L359.408,8.216 L369.632,8.216 L369.632,35 Z M407.792,35.576 C418.16,35.576 425.696,27.752 425.696,18.2 L425.696,18.104 C425.696,8.552 418.256,0.824 407.888,0.824 C397.52,0.824 389.984,8.648 389.984,18.2 L389.984,18.296 C389.984,27.848 397.424,35.576 407.792,35.576 L407.792,35.576 Z M407.888,28.76 C401.936,28.76 397.712,23.96 397.712,18.2 L397.712,18.104 C397.712,12.344 401.84,7.64 407.792,7.64 C413.744,7.64 417.968,12.44 417.968,18.2 L417.968,18.296 C417.968,24.056 413.84,28.76 407.888,28.76 L407.888,28.76 Z M432.272,35 L439.664,35 L439.664,24.248 L445.472,24.248 L452.672,35 L461.312,35 L453.104,23 C457.376,21.416 460.304,18.008 460.304,12.584 L460.304,12.488 C460.304,9.32 459.296,6.68 457.424,4.808 C455.216,2.6 451.904,1.4 447.632,1.4 L432.272,1.4 L432.272,35 Z M439.664,17.72 L439.664,8.072 L447.008,8.072 C450.608,8.072 452.816,9.704 452.816,12.872 L452.816,12.968 C452.816,15.8 450.752,17.72 447.152,17.72 L439.664,17.72 Z" id="MEET-THE-PASTOR" fill="#000000" sketch:type="MSShapeGroup"></path>
</g>
</svg>
不完全是我想要的，因为我需要每个字母都是一个单独的路径，但我也需要每个字母都以正确的格式进行动画制作。