位置: 编程技术 - 正文

谈谈网页设计中的字体应用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字体应用(网页设计中的几种齐方式及其特点)

  • 人头税是什么税
  • 内账需要哪些单据
  • 企业会计制度固定资产保险费
  • 加油充值卡发票能入账吗
  • 公司的班车费用用什么发票
  • 进料加工余料结转可以跨年吗
  • 无形资产处置收益计入
  • 个人收外汇有限制吗
  • 人员工资成本占收入多少合适,占总成本多少合适
  • 小规模纳税人专票和普票区别
  • 预支差旅费属于什么凭证
  • 租车没有发票怎么入账
  • 结转报告中错误结转科目是什么意思
  • 生产企业出口退税流程怎么操作
  • 多缴的增值税能退吗
  • 土地使用税是由出租方还是承租方交
  • 建房子的公司
  • 开具增值税发票的注意事项有哪些?
  • 公司注销欠法人款怎么帐务处理?
  • 收据能不能做账
  • 外地项目预缴个人所得税
  • 企业的财产清查属于帐证核对?
  • 子公司注销后人员怎么安置
  • 代征税款手续费规定
  • 存货计价方法的选择对利润表中的项目没有影响
  • 存货跌价准备用账面余额还是账面价值
  • 社保显示已申报,但缴不了款
  • 华为哪些手机有hicar
  • 事业单位个税手续费返还需要上缴财政吗
  • 手机文件打开方式怎么设置默认
  • 印花税滞纳金应计入什么
  • nuxt支持vue3吗
  • 委托代销委托方的账务处理
  • 汇兑损益和财务费用区别
  • 企业迁址如何办理手续
  • 合伙搞养殖
  • chrome使用教程
  • vue如何学
  • web攻防之业务安全实战指南
  • thinkphp自定义标签page
  • 金蝶利润表主营业务成本公式
  • 土地增值税扣除项目税金包括哪些
  • yolo v5详解
  • ajax调用php接口
  • 特殊动产的一物数卖履行顺序
  • 外省人员收入怎么查
  • 分公司申请独立账户流程
  • 公司股票买卖账务处理
  • 记账王怎么打开以前的账套
  • mysql数据库访问速度慢的解决方法
  • 小规模纳税人增值税超过30万怎么纳税
  • 现金折扣是啥
  • 餐饮娱乐服务员
  • 上月暂估的成本这月收到票怎么做
  • 商业承兑汇票过期了怎么办
  • 什么是资产减值转回
  • mysql压测调优
  • 操作系统中的三级调度
  • xp浏览器无法浏览网页
  • windowssystem32configsystem下载
  • ubuntu怎么把软件放到桌面
  • macbookair安装rosetta
  • slpv24s.exe - slpv24s是什么进程
  • windows10 uac关闭
  • win7系统开机出现英文字母
  • win8自带截图
  • 解决VMware下64位linux系统不支持全虚拟化的办法
  • win7怎么更改系统字体大小
  • Android游戏开发教程
  • andriod 控件
  • css优化提高性能的方法有哪些
  • javascript语言介绍
  • eclipse如何调节字体
  • node.js 开发工具
  • java jsonstring
  • javascript教程代码
  • 云南税务局网上办税大厅登录入口官网
  • 深圳地方税务局电话
  • 物业管理用房如何申请
  • 电子专票在哪里接收
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设