Blog

Blog

PHODAL

网页使用思源字体 CSS

在知乎上再次看到这门字体的提问,想想中文字体过得多么艰辛,中文软件过得多么艰辛。

思源字体

2014年7月,Adobe与Google宣布推出一款新的开源字体思源黑体, 有七种字体粗细(ExtraLight、Light、Normal、Regular、Medium、Bold 和 Heavy),完全支持日文、韩文、繁体中文和简体中文,还包括来自 Source Sans字体家族的拉丁文、希腊文和西里尔文字形。

至于为什么是叫这个名字就变得不是很重要,只是让人有预感,很快这些字体将会无处不在。

  • Android自带的字体难看
  • Adobe Reader很受欢迎

So,这两家公司会在自家的产品上用上这些字体。

下载地址:

Adobe思源: http://sourceforge.net/projects/source-han-sans.adobe/

Google Noto: http://www.google.com/get/noto/

思源字体 CSS

考虑到我姐给我的建议是首页换一个厚重点的字体,于是就换吧。

在网上搜了一下,下了一个然而和官方的似乎是不一样的,官方的font-family应该是Source Han Sans CN。于是我们的CSS代码就出来了

font-family: "Source Han Sans CN"

将之放在首页上的字体。

如果是谷歌的Noto的话

font-family: "noto sans"

简单的对比一下

原来的字体结果如下所示

<img src="/static/media/uploads/screen_shot_2014-07-28_at_13.53.51.png" alt="原文字" width="600" />

新的字体,看词的正文

<img src="/static/media/uploads/screen_shot_2014-07-28_at_13.53.42.png" alt="思源文字" width="600" />

似乎看起来还不错的样子。

其它

可惜的是没有Web Font在当前,要不就爽了,中文的Web Font,唉~~


或许您还需要下面的文章:

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806
comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Engineer, Consultant, Writer, Designer

ThoughtWorks 技术专家

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《前端架构:从入门到微前端》、《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 最新技术分享

标签