优秀设计资源 » Typesource:用HTML&CSS展示谷歌Web Font的字体灵感库

Typesource:用HTML&CSS展示谷歌Web Font的字体灵感库

发表于: 优秀设计资源. 评论
Sponsor

Google Web Font 是一个很好的免费字体库,设计师和前端人员都喜欢便用,但由于字体太多,选择好的字体不太好找,所以今天推荐大家尝试用 Typesource 这个字体灵感站。

该站的特色就是以漂亮的形式展示 Google Web Font 里面的字体,此外用户还可以自行编辑文字内容,并且如果喜欢这个字体的整个Banner设计,用户可以直接复制源码拿走,免费使用。

google 网页字体

编辑字体

STEP 1: 用鼠标移动到要编辑的字体上面,点击【Edit Text】按钮

 

STEP 2: 此时,图中的文字都变为编辑状态,任何文字都可以自己编写了。

使用字体

选择好字体后,那么这些字体如何使用呢?其实非常简单,我们点击字体的【View Source】按钮,进入该页面后,找到【 HTML & CSS】位置,如下图:

这代码包含Google字体引入代码(<link…哪行)、HTML以及CSS样式三个部分,如果你只想需要字体,则直接引入字体文件即可。

但若喜欢他的整个BANNER设计,也可把所有代码放到你的网页上进行修改。

网站名称:Typesource
网站地址: http://tobiasahlin.com/typesource
推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

{ 发表评论 }