教程之家 > 操作系统 > Win10 > 正文

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

2019-11-04 10:46  教程之家  媛媛  
字号:T|T

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代码参数。关注教程之家,解锁更多系统教程。

点击加载更多