如何把谷歌的「思源黑体」作为WEBFONT使用?

   想让你的网站瞬间提升质感?试试谷歌和Adobe联合推出的「思源黑体」!现在只要加入一段 Typekit 程序代码,就可以把思源黑体作为网页字体(Webfont)使用了,附上具体的使用教程,来收!

  相信大家对「思源黑体(Source Han Sans)」都不陌生,这是 Adobe 和 Google 合作,于 2014 年推出的开放原始码免费字型,提供七种粗细设定,完整支持日文、韩文、繁体及简体中文,有鉴于免费中文字型选择不多,在开发上也颇具难度,一推出便受到许多人关注,修改版字型也陆续出现,例如之前介绍过的思源柔黑体、思源真黑体。

  若想将思源黑体做为网页字型(Webfont)使用,你可能会遇到瓶颈,或许是某些问题尚待解决,Google Fonts 迟迟没有把 Source Han Sans 网页字体放上去。最近在翻找资料时发现 Adobe Typekit 已经先行提供「思源黑体」Webfont 了!这也表示网页开发者可以在网站内自由加载这美丽的字型,只要加入一段 Typekit 程序代码。

  除了繁体中文,Typekit 亦有简体中文、日文及韩文共四种思源黑体网页字型。

  Adobe Typekit 虽然不是免费服务,但也有免费方案可以选择,注册后有每月 25,000 次的浏览次数额度,对于一般个人部落格或小型网站来说其实还算充裕(当然你也可以考虑付费升级,价格不高)。

  要如何让你的网站文字更美观、更有质感呢?透过下方的教学,来申请取得 Typekit,并将思源黑体加入你的网站,取代原有默认的字型吧!整体操作还算简单,不过前提是你的部落格提供商必须支持 JavaScript 语法,且要能自行修改 CSS 样式表单。

  Typekit

  STEP 1

  开启 Typekit 网站后,点选右上角的「Browse Fonts」,从 Limited Library 可以找到思源黑体系列,我们要使用的为 Source Han Sans Traditional Chinese 也就是繁体中文。


  从「Source Han Sans Traditional Chinese」可以预览思源黑体在网页上的显示效果,一共七种字重,分别为 ExtraLight、Light、Normal、Regular、Medium、Bold 和 Heavy,最初网站上只提供字型下载,现在也加入了对于 Web(网页字型)的支持。

  点选右上角的「Sign Up」按钮来开始注册吧!


  STEP 2

  进入注册页面,可看到 Adobe Typekit 计价方式,其中有一个免费(Free)方案,虽然可使用的字型数量较少,但仍有每月 25,000 浏览次数额度,点选「Sign Up」选择方案。


  STEP 3

  接着输入你的姓名、Email、密码、国家和生日来注册账号,如果你已经有 Adobe ID 的话也可直接登入开始使用。


  STEP 4

  注册后登入 Adobe Typekit,回到 Source Han Sans Traditional Chinese 页面,点选右上角绿色的「+ Use Fonts」按钮。


  跳出如下窗口后,先从上方的标签选择「Web」,然后点选 Create a new kit 来建立一个新的网站设定。


  STEP 5

  跳出一个 Create a Kit 新窗口后,设定一下要建立的网站名称、网址,因为这段程序代码会限制于你设定的域名上使用,网址部分一定要设定正确喔!

  范例可参照以下灰色文字,无须填入 http:// ,只要输入你的域名部分即可。


  设定完后,就会产生 Install JavaScript 画面,底下就是你要加入网页的程序代码。不过先别急着复制,点选「Continue」回到 Typekit 网页来看看有没有其他设定选项。


  STEP 6

  回到 Typekit 网页,将鼠标光标移动到右上角的「Kits」,会显示你刚才设定好的网站名称,点一下开启设定,会出现如下画面。

  从这里可以设定要使用、加载的思源黑体字型字重,默认只会有 Regular 和 Bold ,为了避免让字型加载速度变慢,建议维持默认值,除非你有特殊的需求。


  点选左上角的「Using fonts in CSS」可以看到详细的 CSS 设定方法,假如你要在标题部分使用思源黑体的话,只要加入一段 font-family 设定值,这部分就不多做说明。


  STEP 7

  最后点选右下角的「Publish」来发布设定更新,Typekit 就会把 JavaScript 程序代码显示在网站上啰!使用者只需要复制这段程序代码,然后把它放到网页</body> 之前,就能在网页内加载思源黑体,让整体阅读效果更理想、更与众不同。


  至于要如何查看用量情形呢?可以从 Typekit 右上角的「Account」来看目前用量,免费方案除了有每月 25,000 次的浏览次数限制外,可加入网站数量只有一个,能选用的网页字型则有两个。

  如果用量超过会怎么样呢?其实就只有网页字型的样式无法加载而已,完全不会影响网站的显示或阅读,倒也不用太过担心。


  值得一试的三个理由:

  思源黑体网页字型(Webfont),已经可以在 Typekit 取得使用

  支持繁体中文、简体中文、日文及韩文,提供七种可选用字重

  免费方案每月可使用 25,000 次浏览配额

时间: 2024-10-27 16:06:34

如何把谷歌的「思源黑体」作为WEBFONT使用?的相关文章

该叫「我的电脑」还是「你的电脑」?

本文讲的是该叫「我的电脑」还是「你的电脑」?, "我的电脑"的变化历程 还记得以前使用 Windows 系统时我的电脑的图标吗?这个经典的小图标表示你在这台电脑上拥有的所有文件,所有的项目.工作资料以及各种数据等等. 而微软将最新 Windows 系统中的这个图标更名为**"电脑"(Computer),然后又将之改成"本机"(This PC)**.这样的修改是否因为"我的"这个用法给人带来了理解的误导.语义的不协调或者是根本没

是谁拖了网站访问速度的「后腿」 ?

  对做前端开发的同学来说,请求排队.网络.Web 应用程序.页面加载.资源下载这些针对网站的性能指标是很熟悉的.对白屏时间.首屏时间.页面加载完成时间.资源下载完成时间以及整页时间这些性能指标也不算陌生. 但是这10个指标分别都是什么意思?跟网站又有什么关系?为什么 TOPN 页面会惊现平均时间为1分钟?是谁在拖网站访问速度的「后腿」?本文希望能够帮助大家解决心中的困惑. 其实,性能指标不在多,找到适合自己业务的,作为判断标准才是最好的. 用户打开一个页面的过程 从用户在浏览器地址栏里面输入一

快递向上 电商向下——「快电」融合下的「核聚变」

在不远的未来,快递公司要直面的竞争对手也极可能是电商巨头,尤其是深耕物流,注重IT系统搭建的互联网巨鳄们. 低调俘获了第三方支付公司网银在线的刘强东,前不久还拿到了自家的快递牌照.身为京东商城董事局主席兼CEO,刘强东看似毫不介意前段时间与快递公司申通的"分手". 本是唇齿相依的两家公司,却在"双11"旺季的前夜闹了别扭.业界倒并不愕然.汉森世纪供应链管理咨询总经理.物流与供应链管理咨询总监黄刚就认为,电商与物流今年的这些动作从某种角度上讲其实是好事.电商公司向下渗

为何不要用「h5」这个简称?

  最近发现好多人喜欢将 HTML5 说成 h5,甚至是代指移动端的 Web Page 或者 Web App.虽然说起来朗朗上口,但是小编真的不建议这样来使用. 小编很早之前做过一个关于「h5 这个说法你的感受」的调查,总共有 552 位粉丝参与,最终结果是:有 16.7% 的人认为「很好」,37.5% 的认为「无所谓」,有 45.8% 的人认为「不喜欢」.那究竟为什么会有那么多人不喜欢「h5」这个简称呢? 「h5」这个简称非常不专业,容易造成误导. 与 JavaScript 被简称为「JS」不

对初阶体验设计师「影响力」构建的浅思

  国内一些刚刚从业.甚至已经从业好几年的用户体验设计师,在做了一段时间设计后,会或多或少产生一些困惑:自己似乎缺少足够的话语权和影响力,总是被产品经理和技术团队牵着鼻子走;花大量时间做一些技术含量不高的「体力活」,却又得不到对等的回报;产品上线了成功了,大家都觉得是产品经理或者技术团队的功劳(尤其是一些UI存在感不强甚至没有UI的产品),而有些忽视UED在背后的付出--于是很多渴望有更多「影响力」的设计师,最终纷纷选择转为产品经理,虽然有一些人在新的岗位做得很棒.让我心悦诚服,但我却从来不觉得

20个简单易上手堪称「神器」的可视化工具

  国外的可视化行业发展得相当成熟,这催生了不少在线信息图表制作工具,介绍比较好用的几个,利用它们,五分钟你就可以做出一张超屌的信息图表: 1]infogr.am 这是较早的一个在线制作工具,亮点是支持实时数据刷新,而且制作的信息图表支持在多终端展示. 2]Venngage 这款工具的亮点是自带超多免费模板,超多的版式选择,配色潮流大胆. 3]Piktochart 跟上一款非常相似,但免费模板不够多~ 用多了你会发现,这些傻瓜型工具的功能都大同小异,他们唯一的区别就是:各有各骚气的模板,各有各屌

教你阅读图书的「方法论」- 评《如何阅读一本书》

引言 最近常圳给我推荐了 <如何阅读一本书> 这本书.这本书最初出版于 1940 年,然后于 1970 年进行了增补改写.到现在已经面世 70 多年,在我写这篇笔记的时候,该书在京东上的 销售排名 位于社会科学销量榜第 2 名,可见该书是多么畅销. 在花两周读完本书之后,我最大的收获是学会了如何更加科学地阅读.在本书中,作者将阅读分为四个层次,并且逐条讲解每一个层次的阅读方法,以及需要达到的目标.本书将阅读分为如下四个层次: 基础阅读 检视阅读 分析阅读 主题阅读 我一直对这 4 个偏学术的名

网站实时分析-Qzone:①独立博客可否获取到其cookies/session进而统计;②其「浏览」是如何统计的?

问题描述 Qzone:①独立博客可否获取到其cookies/session进而统计:②其「浏览」是如何统计的? ①独立博客可否获取到Qzone来路的cookies/session进而统计访客信息(比如QQ号) (也可以说,从A站访问B站后,B站能否获取A站的cookies/session信息?): ②Qzone「浏览」是如何统计的?指的是动态的阅读数量. 解决方案 获取不了cookie,但是可以用js 解决方案二: 这个怎么可能,你如果可以拿到session,那么QQ空间不是要被盗 了,别人直接

你的设计应该「所见即所得」

本文讲的是你的设计应该「所见即所得」, 几年前的一个夏天,我有机会住在旧金山里同一栋楼不同单元的两个 Loft 公寓中. 由于这是同一栋楼,所以你可能会想这两个单元应该是相似的.的确,它们都有1000平方英尺的面积,墙壁上全是巨大的格子窗户,使得阳光和温度能倾泻到屋子里(住在屋子里就像我的故乡德克萨斯州一样,正午阳光与地面的角度有90度).它们的屋子一角都有厨房,还有金属楼梯延伸到二楼的开放式卧室,以及那个烦人的中空门. 最大的不同就是我们待的第一个公寓是在高层,而第二个公寓是在底层.为何这会差