前言
随着网络的发展迅速，各式各样的网站如雨后春笋般崛起。很多的学者或者站长都有着自己的私人网站，那么怎么让你的网站更加个性好看呢？图片，布局，字体等等缺一不可！今天小焦就给大家说说字体。
写过html代码的做过前端的，大伙都知道一般网页中的字体默认是使用宋体的，或者跟随电脑内置字体走的，看的多了，难免产生疲劳感。一个好看的字体可以使你的网页更加漂亮。
工具
- 有字库（网站账号https://www.webfont.com/，这个自行下去注册）
- html（前端代码）
使用方法
第一步：
我们先登陆有字库的官网进行账号的注册，这块就不做详细讲解，有字库是全球最大的中文webfont，大家自行注册
第二步：
上述我们注册完后，然后进行登陆，然后点击官网菜单中的字体列表，进入到我们的选择，界面，这块字体大伙根据自己的需求自行选择。
点击字体列表后，会出现很多的字体，然后大家就可以挑选自己喜欢的字体，然后如图所示点击立即使用
这时候会出现如下图例，小焦已经圈出来了，大家一目了然可以看到有两种调用方式，一种是CSS，一种是JS模式。这里要注意的是，如果你想网站全部调用该字体就用JS模式。如果你只需调用个别字，就使用CSS模式。
调用方式
调用这块JS就不用说了，你只需将JS代码加到你的<head>标签中就行了。下面我们细说一下CSS的调用，我们简单举个例子
我们在输入框中把要变得字全部写到里面，这里小焦简单打了几个字，然后点击生成就行。
具体代码
我们在该字体的标签属性中添加下面两种代码，随意选一个添加。我个人添加的是font-family ,因为有时候class会被覆盖，出现不生效的情况。
font-family:'Source-Han-Ligh1e9ac9368c21033';
class="css1e9ac9368c21033"
（这块代码不需要复制我的，每个人的都不一样）
例如：<h1 style="font-family:'Source-Han-Ligh1e9ac9368c21033';" >你的内容</h1>
例如：<div class="css1e9ac9368c21033" > 你的内容</div>
上述我们在需要的改变字体的标签中加入系统生成的代码就行，然后最重要的就是最后一步，如果忘记的话我们之前的全部就白费了。那就是在<head>标签中加入<link>来调用有字库的第三方字体库
示例：
<link href='http://cdn.repository.webfont.com/webfonts/nomal/135219/
46865/5e329788f629d810d4dd982f.css' rel='stylesheet' type='text/css' />;
结语
操作完上面的步骤，我们就可以刷新我们的网页查看自己的字体时候变化了。其实非常简单，就是调用第三方的字体库来改变自己的字体。有什么问题或者不解的可以在下方留言，或者关注小焦的微信公众号加入QQ群。
评论抢沙发