电话沟通

13371353533

微信咨询

TOP

网站字体使用技巧

发布日期:2020-05-22 10:17:39

浏览次数:1868次

    在网页上应用字体是一项基本技术,同时也是一门艺术。对于英文字体来说可选择的范围实在是太广泛了,合理的使用它们将会为你的网站增色不少。而真正的挑战在于中文字体,由于中文字体组成的特殊性导致其体积过于庞大,除了操作系统内置的字体之外,我们很难在网站上应用其他的字体。我们之前讲过,设计良好的网页对于业务的影响非常大,网页字体的使用也不例外。
    字体一直都是让设计师和工程师头疼的问题。如果参与过产品的设计和开发,会发现经常有以下这种情况出现:
    1. 对比视觉稿和实现出来的网页,其他地方都很完美,就字体不给力;
    2. 在 Mac 上很好看,在 Windows 上丑的要死;
    3. iPhone 和 Android 又不同。
    为什么会出现这样的情况?真正的幕后黑手是系统。
    浏览器使用哪种字体取决于
    1. 你的系统安装了哪些字体(原来以为浏览器自己也会带字体,这是错误的)
    2. 工程师有没有让用户去下载其他字体
    所以网站上到底用什么字体非常关键,涉及到的因素也非常多,主要取决于以下几个方面
    1. 你的产品要在哪个系统上运行
    2. 你的产品是纯英文还是中文英文甚至还有其他国家语言
    我们先来看看网页设计中文字体的使用
    中易宋体:即通常被熟知为宋体、新宋体的字体。是Win最常见的字体,小字体点阵,大字体TrueType,但是大字体并不好看,所以最好别做标题。
    微软雅黑:Vista之后新引入的字体,打开Cleartype之后显示效果不错,不开Cleartype发虚。
    华文细黑:Mac下的默认中文。
    Droid Sans和衍生的WenQuanYi Microhei:Andriod中的中文,也是Linux绝大多数发行版本的默认中文,当然也有用WenQuanyi Zenhei的,不过比较少了。
    中文字体也有英文名称
    很多开发者忽略了这一点:尽管我们在操作系统中常常看到宋体、微软雅黑、华文细黑这样的字体名称,但实际上这只是字体的显示名称,而不是字体文件的名称。虽然说在大多数情况下直接使用显示名称也有效,但有些用户却工作在一些很极端的情况下,这会导致你的字体声明无效。
    比如说,用户安装了中文版的操作系统(这意味着系统有中文字体),但是却切换到了以英文为主要语言——这种情况在那些希望加强英语锻炼的中文用户当中是很常见的。这时候,操作系统很有可能无法按照显示名称找到正确的字体,所以我们要记住的第一件事情就是: 同时声明中文字体的字体名称(英文)和显示名称(中文),就像这样:
    Font-family: SimSun, “宋体”
    Font-family: “Microsoft YaHei”, “微软雅黑”
    Font-family: STXihei, “华文细黑”, “Microsoft YaHei”, “微软雅黑”
    如果我们网站是英文网站,应该考虑如下字体
    Helvetica: 被评为设计师最爱的字体,Realist风格,简洁现代的线条,非常受到追捧。在Mac下面被认为是最佳的网页字体,在Windows下由于Hinting的原因显示很糟糕。
    Arial: Helvetica的「克隆」,和Helvetica非常像,细节上比如R和G有小小差别。如果字号太小,文字太多,看起来会有些累眼。Win和Mac显示都正常。
    Lucida Grande是Mac OS UI的标准字体,属于humanist风格,稍微活泼一点。Mac下的显示要比Win下好。
    Verdana: 专门为了屏显而设计的字体,humanist风格,在小字号下仍可以清楚显示,但是字体细节缺失严重,最好别做标题。
    Tahoma: 也是humanist风格,字体和Verdana有点像,但是略窄一些,counter略小,曾经是Windows的标准字体,Mac 10.5之后默认也有安装。
    Trebuchet MS: 为微软设计的一个humanist风格字体,个人觉得个性太过突出,用得不好会不搭。
    永远不要忘记声明英文字体,并且英文字体应该在中文字体之前
    记住这个事实:绝大部分中文字体里包含英文字母(但是基本上都很丑),而英文字体里不包含中文字符。
    在网页里中/英文混排是很常见的,你绝对不会喜欢用中文字体显示英文的效果,所以一定不要忘了先声明英文字体:
    Font-family: Georgia, SimSun, “宋体”
    Font-family: Arial, “Microsoft YaHei”, “微软雅黑”
    最后别忘了照顾不同的操作系统
    作为一个 Web 开发者,我们不仅在网站建设应注意浏览器的兼容性,还要特别关注不同的操作系统,你理应对 Windows, Mac OS, Linux 家族等常用操作系统里的系统字体有足够的了解,特别是中文。在这里,我们假设目标网站要同时给予 windows 用户和 mac 用户最好的字体体验,于是我们可以这样声明:
    Font-family: Helvetica, Tahoma, Arial, STXihei, “华文细黑”, “Microsoft YaHei”, “微软雅黑”, sans-serif
    这句声明都做到哪些事情呢?让我们一一说明(括号内代表其对应的目标操作系统):
对于英文字符,首先查找Helvetica(Mac),然后查找Tahoma(Win),都找不到就用Arial(Mac&Win);若是以上三者都缺失,则使用当前默认的sans-serif字体(操作系统或浏览器指定);
    对于中文字体,我们已经了解其规则了。华文细黑(Mac),微软雅黑(Win)是这两个平台的默认中文字体。
公司总机: 400-995-9113      13371353533 公司地址: 山东省烟台市芝罘区烟台服务外包基地409室
商务QQ: 470553894 / 729650911 技术QQ: 470553894
电 话 咨 询