位置: 编程技术 - 正文

谈谈网页设计中的字体应用Font Set(谈谈网页设计中的内容)

编辑:rootadmin

Hihi, 大家好~ 最近有不少人都提及了网页上该如何选择字体的问题。问题虽然小,但是却是前端开发中的基本,因为目前的网页,还是以文字信息为主,而字体,作为文字表现形式的最重要参数之一,自然有着相当重要的地位。可惜字体的重要性在很长时间内并没有得到足够的重视。很多人对字体的概念还是停留在 font-family: "宋体", Arial, Helvetica, serif 的阶段,却不明白为什么这样设置,这样设置是否合理等等。现在就让我说说字体的来龙去脉吧。

- font-family

大家知道CSS规则中定义字体是通过 font-family 这条规则来实现的。仔细翻翻CSS的文档,却没有发现任何能指定某一个特定字体的规则。

想想十年前,你可以随处看见类似于这样的代码:

<font face="Frankin Gothic Book">Lorem Ipsum</font>

几乎不会有人考虑到,Frankin Gothic Book是一个 Windows only 的字体。在一台Mac上根本看不到Frankin Gothic Book字体的效果,系统因为找不到这种字体,就改用Mac的默认字体显示了。于是,网页的风格就和原来完全不一样了,根本达不到Frankin Gothic Book的效果。于是W3C提出了font set 的概念——将一系列近似的字体按照优先级顺序组成一个列表;浏览器从列表头部开始匹配,知道找到第一个可用的字体,并使用该字体进行显示。

比如上面这个例子,我们可以创建这样的一个font set:

<span style='font-family: "Franklin Gothic Book","Lucida Grande"'>Lorem Ipsum</span>

我们来看看浏览器怎么来呈现这段文字吧: Windows下:浏览器从列表的第一个字体开始搜索——系统中存在Frankin Gothic Book,使用Frankin Gothic Book字体显示。 Mac 下:浏览器从列表的第一个字体开始搜索——系统中不存在Frankin Gothic Book,搜索失败。继续搜索下一个字体——Lucida Grande。系统中存在Lucida Grande字体,终止搜索,并用Lucida Grande字体显示。

这样在Mac上,Mac就能以与Frankin Gothic Book类似的Lucida Grande字体显示这段文字。

但是可能存在一台电脑,上面既没有Frankin Gothic Book字体,也没有Lucida Grande字体,那么它仍然无法正确显示上面的这段文字。于是开发人员不得不在这个字体列表中不断增加字体以适应各种系统,导致这个font set失去原本的“组织近似字体”的作用。于是font set中引入了“通用字体族”,也就是我们经常看见的 serif 和 sans-serif。我会在今后的文章中详细的介绍这两个,以及一些其他的通用字体族。在这里,我们可以简单的将它们理解为一种“在所有指定字体都失效的情况下,浏览器指定的一种最终的代用字体”。

比如我们在改进一下上面的那段示例文字:

<span style='font-family: "Franklin Gothic Book","Lucida Grande",sans-serif'>Lorem Ipsum</span>

我们再看看浏览器怎么来呈现这段改进后的文字吧: Windows下:浏览器从列表的第一个字体开始搜索——系统中存在Frankin Gothic Book,使用Frankin Gothic Book字体显示。 Mac 下:浏览器从列表的第一个字体开始搜索——系统中不存在Frankin Gothic Book,搜索失败。继续搜索下一个字体——Lucida Grande。系统中存在Lucida Grande字体,终止搜索,并用Lucida Grande字体显示。 某系统:浏览器从列表的第一个字体开始搜索——系统中不存在Frankin Gothic Book,搜索失败。继续搜索下一个字体——系统中也不存在Lucida Grande字体。继续搜索下一个字体——通用字体sans-serif。浏览器应用它的默认sans-serif字体"Arial"来显示这段文字。

请注意两点。首先,通用字体族具体对应哪个字体,是由浏览器决定的。上面例子中浏览器指定Arial为sans-serif字体,但完全有可能另一个浏览器指定Helvetica 为它的sans-serif字体。具体哪个字体被最终应用,是无法预期的。其次,通用字体族只是一种在font set中其他字体都无效时的代用方案。因此——设计者应该尽可能的给出齐全的font set,以尽可能的覆盖所有的系统,而不应该依赖于通用字体族。

类似于以下的两种写法都是错误的:

<span style="font-family:sans-serif">Lorem Ipsum</span> <span style="font-family:sans-serif,Arial">Lorem Ipsum</span>

第一种写法的错误在于——它相当于根本没有指定字体,仍旧是交由浏览器选择字体。写了相当于没写。

第二种写法的错误在于顺序。因为通用字体族应该在一个font set中其它所有字体都失效时才起作用。因此,将指定字体放在通用字体之后,会造成制定字体尚未匹配时就使用了通用字体。所以,你应该务必使通用字体处在font set中的最后一位。

另外,这里要说明两件事情。

首先,浏览器应用font set中哪个字体的规则虽然看上去很简单,但其实非常trickish。我会在以后的文章中做出具体的说明。

其次,虽然字体的CSS规则名称叫font-family, 但它的实质是一个font set,而不等是印刷意义上的font family。印刷上的font family 是指一系列相同字样的不同强度组合,比如Lucida Family(包括Lucida Sans, Lucida Sans Typewriter, Lucida Console, Lucida Grande等等)和Arial Family(Arial, Arial Black, Arial Rounded MT等等),但显然这些font family 都不适合直接拿来当作一个font set来使用。

今天就到这里了哟。下次我们来仔细谈谈通用字体族。

推荐整理分享谈谈网页设计中的字体应用Font Set(谈谈网页设计中的内容),希望有所帮助,仅作参考,欢迎阅读内容。

谈谈网页设计中的字体应用Font Set(谈谈网页设计中的内容)

文章相关热门搜索词:网页设计涉及到什么内容,谈谈网页设计中的问题,谈谈网页设计中JavaScript的功能和意义,网页设计的简述,网页设计的简述,谈谈网页设计中的内容,谈谈网页设计的理解,谈谈网页设计中的内容,内容如对您有帮助,希望把文章链接给更多的朋友!

网页设计中的 serif 和 sans-serif字体应用 Howdy,大家好,又是我~上一次我们简单的谈了一下fontset和一些要注意的基本问题。今天我们继续字体这一话题,深入讲讲上次提到的通用字体族。首先是

采用XHTML和CSS设计可重用可换肤的WEB站点的方法第1/4页 XHTML标准的目标是取代html。按照W3C的说法,XHTML是html的继承者(

CSS 浏览器的等宽空格问题解决 但是也不是很可靠,比如空格间距非常大,那么我们必须增加多个占位符,同时页面的体积会变得非常大。同时,注意到Safari中的宽度是已设定字符的

标签: 谈谈网页设计中的内容

本文链接地址:https://www.jiuchutong.com/biancheng/375349.html 转载请保留说明!

上一篇:CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]

下一篇:网页设计中的 serif 和 sans-serif字体应用(网页设计中的几种齐方式及其特点)

  • 金税四期税务机关一局式
  • 个税汇算清缴可以修改收入吗
  • 高企入库补贴要交企业所得税吗
  • 计提坏账后又收回怎么做
  • 总账一级科目有哪些
  • 新企业会计准则2021
  • 加油卡充值发票怎么入账
  • 居民个人根据各项所得的收入 公益捐赠
  • 房地产企业拆迁补偿契税政策
  • 公司注销时认缴不到位怎么办
  • 第三方支付付款方式
  • 12月了还没找到工作怎么办
  • 外购产品赠送他人合法吗
  • 小规模企业税务筹划
  • 职工福利费发票不小心抵扣了汇算清缴
  • 安装工程开发票
  • 年终奖怎么缴纳个税
  • 《外出经营活动税收管理证明》收购发票
  • 小微企业减免所得税
  • 个人所得税的速算扣除数是什么意思
  • 公司租土地建厂房应该怎么做账呢?
  • 增值税发票为什么要勾选认证
  • Linux中终止某个用户的所有进程的简单方法
  • 苹果6splus怎么操作技巧
  • win7如何隐藏任务栏正在游戏的图标
  • 个人社保和公积金扣款公司七个人三怎么样
  • 个人交五险一金和单位交五险一金的区别
  • 域名停靠是病毒吗
  • 为什么Windows 7搜不到网
  • linux中安装命令
  • 别人说你坏话怎么发朋友圈说说
  • 成本核算流程会议记录
  • 个人从事生产经营
  • php编程入门教程
  • 生产成本二级科目会计分录
  • 工会经费计税依据是上年工资还是当年工资
  • 制造费用的工资怎么结转
  • 商贸公司库存怎么盘点准确一点儿
  • 所得税申报资产总额平均值
  • 在pycharm中配置python
  • 租赁公司车转到私人名下
  • 专用发票超过360天未认证
  • 职工教育经费是从工资里扣吗
  • 允许在企业所得税税前扣除的
  • 零售药店过期药品整改报告
  • 进项税额大于销项税额期末留抵
  • 免税农产品怎么开发票
  • 公司购买银行理财产品收益交什么税
  • 固定资产是否可调剂
  • 润滑油开具增值税专用发票
  • 劳务支出如何做账
  • 投资入股行为
  • 年末未分配利润总额计算公式
  • win10安装mysql初始化失败原因
  • soapui安装与配置
  • windows xp输入法不见了怎么办
  • 如何卸载centos7
  • w8系统怎么用
  • centos7安装中文包
  • windows10如何关闭快捷键
  • linux服务器搭建实战详解
  • 软件生态圈是什意思
  • linux打包压缩文件的命令
  • windows7开机磁盘检查怎么取消
  • Cocos2d之CCScene
  • opengl es2.0
  • javascript中的数据类型分为两大类
  • css英文代码翻译
  • js是函数式编程语言吗
  • string剪切
  • 玩转cmd命令
  • python动态网页开发教程
  • staticlayout 换行
  • 广西税务局123
  • 河北个体工商户年报入口
  • 北京税务分所怎么样啊
  • 新加坡关税壁垒
  • 陈列费发票能抵扣吗
  • 开票系统税控盘在哪里
  • 税务报道是干什么
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设