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 最特别的地方在于,字体是由代码构成的。有了这些代码,它可以随意变身。比如,在暗夜里闪耀出七色的光影:
比如,在春天里枝繁叶茂,花也开好了:
比如,雨点打在地上汇成了河:
形状 (Shapes) 、效果 (Effects) 、动画 (Animations) ,特技丰盛任君选择。魔法字体,是名叫 Jongmin Kim 的韩国小伙伴,为了庆祝宝宝降生而设计的。不过,这不是独乐乐,是普天同庆:因为代码开源了,GitHub 已经有 6200 星。除此之外,还有线上 Demo 可以玩耍。
最基本的操作,就是改变粗细 (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字体目录下
1、Win10自带字体存放在哪里?打开Win10的字体安装文件夹,可以双击打开这台电脑--》打开C盘--》打开Windows--》打开Fonts;也可先打开计算机,在计算机地址栏上直接拷贝“C:\Windows\Fonts”路径,回车打开Win10字体文件夹。如下图所示。
2、右键下载好的字体,选择“复制”,如下图所示。
3、在Win10字体文件夹,直接复制安装字体,如下图所示。
4、Win10字体安装完毕后,在字体文件夹里就可以看到刚才安装的字体啦。如下图所示。
第二种方法:下载的字体上直接右键,选择安装
1、右键下载好的字体,选择“安装”进行字体安装,如下图所示。
2、点击后,字体正在安装中,如下图所示。
3、安装完成后,在Win10字体文件夹里就可以看到刚才安装的字体啦。如下图所示。本人推荐这种快捷安装哈。
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代码参数。关注教程之家,解锁更多系统教程。