前言
对于设计稿的解析中,肯定是有些设计稿有特殊的字体,而这些字体可能只有设计师才有,或者只有前端拓展了系统字库才能显示器正确效果。但对于前端页面的终极使用者,他们可能系统没有这些字体,那么对于这些特殊字体究竟该如何处理? 本文通过与设计,产品,前端的统一沟通,达成共识如下。请各个前端 按照这个原则去对应的解析实现设计ui效果。
界限划定
首先我们的前提是针对常规正文,大篇幅文本的字体,而非标题、活动页、特效页的部分特殊字。对于前者我们是用css代码限定font-family,或者webfont解决实现;对于后者通过切图实现。 其中特别说明:Open Sans 的中文字体在 Mac 上效果不错,微软雅黑的中文字体在 Windows 上效果不错。
一 解决方案--具体规范
自带字体(推荐)
用户系统中自带的字体,不需要任何特殊支持的,这类也被成为web安全字体。这部分设计师可以大胆去采用,但是一个项目中的正文也是建议控制在一种常规字体,建议body里定义默认正文字体列表,而不是每个部分都需要单独查看字体定义字体。css约定了五种都会支持的字体,另外不同系统也会支持不同的字体,汇总如下表格。
字体种类字体列表
css约定字体(英文字体)(5类非五个)serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"
windows自带中文字体黑体,宋体,新宋体,仿宋,楷体,微软雅黑体
mac自带中文字体华文细黑,黑体-简,苹方-简
注意事项:特别的针对font-family说明下,font-family属性是多种字体的名称,作为一个"应变"制度,以确保浏览器/操作系统之间的最大兼容性。如果浏览器不支持的第一个字体,它尝试下一个的字体。你想要的字体类型如果浏览器找不到,它会从通用的字体类型中找到与你相似的.代码语法如下:body{font-family:"Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;}
@font-face实现webfont(不推荐)
@font-face 介绍 @font-face是css中的一个功能模块,用于实现网页字体多样性(设计者可随意指定字体,不需要