justfont網頁字型進階使用技巧 | justfont就是字,中文字型web font服務,中文網頁字型web font,網頁字型,雲端字型,中文字型,字型設計與字型知識,信黑體代理
Step1
注册会员后,请到右上方点选《新增项目》(1),会跳出窗口请您输入项目名称与要启用的网址(2)。
justfont新增专案
Step2
在字型列表中,选取您要使用的字型(3),选择后请到右上方点选《管理项目》(4)。
justfont选取要使用的字型
Step3
建议您使用《CSS 方式设定》,处理和显示速度较快速。
Step1
请先建立项目,到项目管理中选择您要使用的字型(1),并输入您要设定的css卷标,或使用默认卷标(2)。
justfont css标签
关于css如何设定,可参考以下说明

html中为<div   class="title">测试</div>,则输入

html中为<div   id="content">测试</div>,则输入

也可直接指定标签,例如html中为<h2>测试</h2>,则输入

设定成 效力较 来的大,较不易被既有的字型设定覆盖。


Step2
到右上方点选《JS》按钮(3) 并复制Javascript程序代码(4)。
justfont复制程序代码
Step3
将取得的程序,加入在您网页的最前面可加速运作,例如加入于 body 标签之前(5)。
justfont加入在您网页的最前面
Step4
将您要使用的字型卷标,加入于网页文字的html中 (6)
justfont字型卷标设定
Step5
设定完成即可显示成功!
justfont设定完成
选择《CSS》或 《font-family》其中一种方式设定即可。
Step1
选择您要使用的字型,在css中输入 font-weight(1) 以及 font-name (2)。
justfont font-family设定
Step2
将您网站中的 css 设定成如下,即可正确显示:

.content {

      font-family: "xingothic-tc";

      font-weight: "400";

}


Step3
到右上方点选《JS》按钮(3) 并复制Javascript程序代码(4)。
justfont复制程序代码
Step4
将取得的程序,加入在您网页的最前面可加速运作,例如加入于 body 标签之前(5)。

Step5
设定完成即可显示成功!
注意!
如您使用的是《以font-family设定》,可在css中直接设定优先生效之英文字型,例如:

.content {

      font-family: "Times New Roman","xingothic-tc";

      font-weight: "400";

}

Step1
如使用《以css设定》,请先到《项目管理》中选择您要使用的字型(1),如出现 表示预设欧文搭配 google fonts (2),直接套用即可,或可输入您自行指定之优先欧文字型名称。
justfont复制程序代码
Step2
到右上方点选《JS》按钮(3) 并复制Javascript程序代码(4)。
justfont复制程序代码
Step3
将取得的程序,加入在您网页的最前面可加速运作,例如加入于 body 标签之前(5)。
justfont加入在您网页的最前面
Step4
将您要使用的字型卷标,加入于网页文字的html中 (6)
justfont字型卷标设定
Step5
设定完成即可显示成功!
Step1
先了解 justfont 运作时,会提供三种不同的css状态,分别为:

.jf-loading : 运作中

.jf-active : 执行完成

.jf-inactive : 执行失败


Step2
利用justfont所提供的三种状态,就可以设定在未处理完成前不做显示,等处理完毕后再显示的功能。
下面范例为设定 body 整个内容于处理完成前不显示:
.jf-loading body { /*加载中不显示*/
      opacity: 0;
      visibility: hidden;
}
.jf-active body { /*如果处理成功,直接显示*/
      opacity: 1;
      visibility: visible;
}
.jf-inactive body {/*如果处理失败,直接显示*/
      opacity: 1;
      visibility: visible;
}

或是采用
先出现默认默认字型,但利用 jf-active 和 jf-inactive 以渐变显示:
.jf-active *, .jf-inactive * { /*处理成功或失败,都以渐变显示*/
      -webkit-transition: opacity 1s ease-out;
      -moz-transition: opacity 1s ease-out;
      -o-transition: opacity 1s ease-out;
      transition: opacity 1s ease-out;
}
CSS 状态
justfont提供三种css状态,分别为

.jf-loading : 运作中

.jf-active : 执行完成

.jf-inactive : 执行失败


_jf.flush() 刷新
提供 _jf.flush() 函数,支持网页的动态加载。(justfont Script v4.7 以上支持)

<script type="text/javascript">

$('.text').click(function(){

      $('.text').text('变动的文字');

      _jf.flush(); //内容变动后,呼叫此函数刷新字型

});

</script>


justfont 触发事件 API
justfont 提供三个事件触发函数,让您可依照状况来进行处理,请在 justfont 提供的 javaScript 前,加入以下程序代码

<script type="text/javascript">

var _jf = _jf || [];

_jf.push(['_eventPreload',function(){

   //载入前触发事件

}]);

_jf.push(['_eventActived',function(){

   //成功触发事件

}]);

_jf.push(['_eventInactived',function(){

   //失败触发事件

}])

</script>

Step1
先到您Wordpress中确认您要套用的 css 标签。
justfont css标签
如上图要套用的部分,您可设定成

网页中标签为 <h2   class="entry-title"><a href=.....

可在《项目管理》后台中的字型 css中,设定成以下三种方式皆可:

(css优先权较低,如原始theme中有字型设定可能会被覆盖)

(css 设定优先权较高)

(最推荐,css 设定优先权最高)


Step2
请先建立项目,到项目管理中您要使用的字型(3),并输入您要设定的css标签,在这里设定成 h2.entry-title a (4)。
justfont复制程序代码
Step3
取得 javascript 程序后,到 Wordpress 后台中,进入《外观》(5)中的《主题编辑器》(6)。
justfont加入在您网页的最前面
Step4
选取页首 header.php (7),将 Javascript 放在 body 标签之前(8)。
justfont字型卷标设定
Step5
设定完成即可显示成功!
justfont设定完成
以上说明是针对虚拟主机或自行架设 Wordpress 的操作说明。 wordpress.com 因不支持 Javascript 嵌入,无法使用 justfont 机制。
Step1
先到您 Weebly 页面中确认您要套用的 css 标签,例如您要套用到 Logo处 (1)。
检视weebly的标签
如上图您要套用的CSS标签 #logo , #logo a已有默认字型 (2) ,您需要设定成

(此设定优先权较 Weebly 默认字型高,可覆盖原本设定)


Step2
请先建立项目,到项目管理中您要使用的字型(3),并输入您要设定的css标签,在这里设定成 body #logo a (4)。
justfont复制程序代码
Step3
取得 javascript 程序后,到 Weebly 后台中,进入《建构》左方的《嵌入代码》(5),并拖曳到页面的前方处。
justfont加入在您网页的最前面
Step4
将您的 javascript 贴到此区块中(6),并做网站发布。
justfont字型卷标设定
Step5
设定完成即可显示成功,Logo 正确显示为信黑体W8(7)!
justfont设定完成