收藏本站 | 站点地图 | 繁體中文
沭阳乐园
您现在的位置: 沐阳乐园 >> 文章中心 >> 网站建设 >> 网页设计 >> 正文
[组图]网页设计新趋势:关于web字体的那些事儿         ★★★
网页设计新趋势:关于web字体的那些事儿
作者:佚名 文章来源:优设网 点击数:10461 更新时间:2014-5-17 12:51:13

网页设计 Web字体 网页字体

@陈子木 我曾与一位视觉设计师合作共同开发一款web应用。他提交给我的设计稿看起来非常带感,于是我根据他的设计稿,用HTML和CSS将web应用写了出来。当我以为一切都已完成,并且火急火燎地将产品给他看的时候,知道他说啥了么?

“你全做错了。”

的确。我并没有根据他的模型来使用字体,为此他专门把我叫出来并告诉我这是一个非常大的错误。我该如何弥补呢?

“我不知道。但是目前它是最大的问题,毫无疑问。”

说起来,在过去的很长一段时间里,我都同不同的网页设计师一起合作开发各种不同的网站,这使得我逐渐开始关注网页设计中的很多细小但重要的细节了,比如,字体。

在此可以简单介绍一点背景知识。目前多数的网站都是基于HTML和CSS来开发的,如果你毫无网站开发经验,也许你有必要找个HTML&CSS的介绍视频学习一下,比如1小时创建一个体验不错的个人网站页面之类的教程。

以下,是我的视觉设计师教授给我的字体知识。

字体规格

改变某写字体样式最简单的方式,是改变CSS的Font-family属性,然后,浏览器会直接读取用户电脑上的字体,想必每个网站开发者都明白这件事情。一般而言,一共有12种常见的网站安全字体,除开相对特殊的Comic Sans,还有11款字体可以供你在绝大多数类型的网站上随意使用。

如果你的视线仅仅盯着这十来个字体就未免太局限了。如果你足够敏锐,你会有意识地调整字体的粗线(light、normal、bold)和字间距,追求更好的效果。举个例子,当你在导航栏中使用特粗的字体,紧凑的字体间距,会让你的网站看起来更加专业。相反,如果你使用的是极细的字体,网页会给人一种非常锐利、清晰的感觉。

另一个使用字体的窍门,就是在CSS中为字体添加字体阴影属性。

以下的案例中,字体家族被设定为Helvetica,并且字体粗细被设定为极细。

网页设计 Web字体 网页字体

这一字体的案例源自于我们的web应用Nomster。

字体栈

当你在指定要用什么字体的时候,你可以根据重要程度来设定一个顺序,越靠前的优先级越高。当设备中没有排名考前的字体的时候,那么系统会自动调用排名靠后的字体。这也就是为什么windows和Mac内置字体不尽相同,但是最终都能调用合适的字体而正常显示网页内容的原因所在。对于这个字体栈的设定,以下的工具/网站应该能帮到你:

CSS Tricks – Font Stacks:这是一个拥有8个不同字体的字体栈,直接从CSS Tricks抓取这个字体栈,你的网站字体效果肯定不会像1995之前的网站那么残废。

CSSFontStack.com:一个专业提供各种不同字体栈的网站,超过40种不同字体栈供你选择~

当然,如果你通过谷歌和百度来搜索应该可以发现更多的字体栈。

以下的使用案例同样来自我们的Web应用Nomster。它所使用的字体栈也是我们最喜欢的,因为它确实提高了网站的可读性。

网页设计 Web字体 网页字体

加载特定字体

在web应用中使用特定字体来显示文本,是一件可行性很高的事情。你不必找一个“看起来很像”的字体来凑合,因为以下的方法可以帮你直接用你喜欢的字体:

字体托管服务

将一个普通字体加载到网站上,确实需要一点技巧。字体托管服务可以替你做到这一点,不过有的是免费的,有的是收费的。

Google web Fonts:谷歌的字体服务还是非常靠谱的,整合了许多优质的web字体供你调用到网站中去。按照谷歌官方的指示,你可以轻松地在你的web应用中调用这些字体。

[1] [2]  下一页

文章录入:音乐听听    责任编辑:音乐听听 
  • 上一篇文章:
  • 下一篇文章:
  • 【字体: 】 【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
    广告招商
    网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)
    ::发表评论::
     姓 名:
     评 分: 1分 2分 3分 4分 5分
     评论内容:
  • 严禁发表危害国家安全、政治、黄色淫秽等内容的评论。
  • 用户需对自己在使用本网服务过程中的行为承担法律责任。
  • 本站管理员有权保留或删除评论内容。
  • 评论内容只代表网友个人观点,与本网站立场无关。
  • 广告招商
    文章 下载 图片 文字广告
    | 设为首页 | 加入收藏 | 联系站长 | 友情链接 | 版权申明 | 网站公告 | 管理登陆

    备案/许可证编号: 闽ICP备16020960号-1号 域名创建于2016年8月
    版权: 沐阳乐园 All Rights Reserved 站长:张萍 邮箱:381415887@qq.com 联系QQ:联系站长