欢迎访问的小伙伴! 希望在这里能帮到你。有问题请多多指教~ 点击联系站长

利用”有字库”使你的网站字体更加个性!

HTML 焦康阳 0评论

前言

随着网络的发展迅速,各式各样的网站如雨后春笋般崛起。很多的学者或者站长都有着自己的私人网站,那么怎么让你的网站更加个性好看呢?图片,布局,字体等等缺一不可!今天小焦就给大家说说字体

写过html代码的做过前端的,大伙都知道一般网页中的字体默认是使用宋体的,或者跟随电脑内置字体走的,看的多了,难免产生疲劳感。一个好看的字体可以使你的网页更加漂亮。

工具

  1. 有字库(网站账号https://www.webfont.com/,这个自行下去注册)
  2. html(前端代码)

使用方法

第一步:

我们先登陆有字库的官网进行账号的注册,这块就不做详细讲解,有字库是全球最大的中文webfont,大家自行注册

有字库注册

第二步:

上述我们注册完后,然后进行登陆,然后点击官网菜单中的字体列表,进入到我们的选择,界面,这块字体大伙根据自己的需求自行选择。

字体列表
第一步:点击字体列表

点击字体列表后,会出现很多的字体,然后大家就可以挑选自己喜欢的字体,然后如图所示点击立即使用

点击试用
第二步:选择喜欢的字体点击立即使用

这时候会出现如下图例,小焦已经圈出来了,大家一目了然可以看到有两种调用方式,一种是CSS,一种是JS模式。这里要注意的是,如果你想网站全部调用该字体就用JS模式。如果你只需调用个别字,就使用CSS模式。

添加js
两种调用模式根据自己情况选择

调用方式

调用这块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群。

小焦的自学QQ群

喜欢 (1)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址