魔法字体Leon Sans如何安装 代码组成的艺术字体Leon Sans使用教程

Leon Sans是一种特效的动态字体。它有哪些效果呢？Leon Sans如何安装呢？Leon Sans是一种魔法字体，和中规中矩的字体完全不同，它是动态的，可以随意变身。那么Leon Sans如何安装？Leon Sans如何修改？Leon Sans是由代码组成的，和一般的字体安装方法是不同的，一般的字体一般不改，但是Leon Sans可以通过修改参数来改变字体粗细等。下面来看看Leon Sans使用教程。

Leon Sans是什么？Leon Sans是一种几何无衬线字体，表面看去平平无奇，但最特别的地方在于，字体是由代码构成的。有了这些代码，它可以随意变身。它允许动态更改字体粗细，并在 HTML 5 的画布元素中创建自定义动画、效果或形状。

特效字体Leon Sans有什么用

这个字体叫 Leon Sans，表面看去平平无奇。

但事实上，它并不是普通的字体，体内蕴藏着魔力。Leon Sans 最特别的地方在于，字体是由代码构成的。有了这些代码，它可以随意变身。比如，在暗夜里闪耀出七色的光影：

比如，在春天里枝繁叶茂，花也开好了：

比如，雨点打在地上汇成了河：

形状 （Shapes） 、效果 （Effects） 、动画 （Animations） ，特技丰盛任君选择。魔法字体，是名叫 Jongmin Kim 的韩国小伙伴，为了庆祝宝宝降生而设计的。不过，这不是独乐乐，是普天同庆：因为代码开源了，GitHub 已经有 6200 星。除此之外，还有线上 Demo 可以玩耍。

Leon Sans如何使用

最基本的操作，就是改变粗细 （Weight） 。

不止给标准字体调粗细，也给炫彩的艺术字调粗细：

然后，加大一点难度，让字体瑟瑟发抖。就是把线条变得曲折。稍稍不平整，就会轻微的抖动。剧烈的弯折，就是触电了，烧糊了：

拔电，再也不动了。不过还好，可以顺手把它埋在春天里 （误） ：

当然，埋法不止这一种。也可以把字母截断，变成粉红色的「多米诺骨牌」，每张牌的宽窄还能自由选择：

还可以让文字看上去，在平静中流淌：

线上 Demo 的功能一共十几种，大家也可以自行试验。如果 Demo 还不能满足你的想象，那就去食用代码吧。

如何安装Leon Sans？如何修改Leon Sans？

Leon Sans字体是代码组成的。

文本有代码表示：text，字体大小有代码表示：size，粗细有代码：weight，字间距有代码表示：tracking……

let leon, canvas, ctx;

const sw = 800;

const sh = 600;

const pixelRatio = 2;

function init() {

    canvas = document.createElement('canvas');

    document.body.appendChild(canvas);

    ctx = canvas.getContext("2d");

    canvas.width = sw * pixelRatio;

    canvas.height = sh * pixelRatio;

    canvas.style.width = sw + 'px';

    canvas.style.height = sh + 'px';

    ctx.scale(pixelRatio, pixelRatio);

    leon = new LeonSans({

        text: 'The quick brown\nfox jumps over\nthe lazy dog',

        color: ['#000000'],

        size: 80,

        weight: 200

    });

    requestAnimationFrame(animate);

}

function animate(t) {

    requestAnimationFrame(animate);

    ctx.clearRect(0, 0, sw, sh);

    const x = (sw - leon.rect.w) / 2;

    const y = (sh - leon.rect.h) / 2;

    leon.position(x, y);

    leon.draw(ctx);

}

window.onload = () => {

    init();

};

每一种特技也都有各自的代码，支持参数调节。比如，瑟瑟发抖叫做 wave，抖动频率用 fps 来调。只要用这一串代码，就可以把灵动的字体，在 H5 上显示了。

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>

Win10如何安装字体

第一种方法：把字体复制到Win10字体目录下

1、Win10自带字体存放在哪里？打开Win10的字体安装文件夹，可以双击打开这台电脑--》打开C盘--》打开Windows--》打开Fonts；也可先打开计算机，在计算机地址栏上直接拷贝“C：\Windows\Fonts”路径，回车打开Win10字体文件夹。如下图所示。

2、右键下载好的字体，选择“复制”，如下图所示。

3、在Win10字体文件夹，直接复制安装字体，如下图所示。

4、Win10字体安装完毕后，在字体文件夹里就可以看到刚才安装的字体啦。如下图所示。

第二种方法：下载的字体上直接右键，选择安装

1、右键下载好的字体，选择“安装”进行字体安装，如下图所示。

2、点击后，字体正在安装中，如下图所示。

3、安装完成后，在Win10字体文件夹里就可以看到刚才安装的字体啦。如下图所示。本人推荐这种快捷安装哈。

Win10无法安装ttf字体的解决方法

Win10无法安装ttf字体是什么原因？该问题应该与系统服务和防火墙设置有关。

1、电脑小娜，搜索框中输入“服务”，然后点击搜索结果中的“服务 桌面应用”。

2、在打开的服务窗口，分别找到名称为Windows Update和Windows Installer的两项服务，对其双击鼠标左键（一个个操作哦）。

3、在服务属性对话框，查看启动状态，如果没有启动，点击“启动”按钮，等待系统自动启动完成即可。

4、使用Win+I组合键，打开Windows 设置，在搜索框中输入“控制面板”，点击下面的搜索结果。

5、打开控制面板后，在大图标查看方式下，点击选择Windows 防火墙。

6、在Windows Defender防火墙窗口，点击“使用推荐设置”，启用推荐设置即可。

7、再去尝试安装，就可以正常安装了。

以上就是Leon Sans这种魔法字体的安装、修改、使用方法。Leon Sans动态字体，由代码组成，Leon Sans的安装方法是使用代码，和普通字体的安装方法完全不同。Win10安装字体的方法，要么把下载字体复制到系统字体所在路径，或者在下载的字体右键，选择安装就可以。但普通字体不能修改。Leon Sans字体修改字体粗细就是修改Leon Sans代码参数。关注教程之家，解锁更多系统教程。