0

0

你可能不知道的font_html/css_WEB-ITnose

php中文网

php中文网

发布时间:2016-06-24 11:26:51

|

1269人浏览过

|

来源于php中文网

原创

对于字体的认识一直有一个误区:我们可能一直认为font-family是某一种字体,实际上,它指的是一个字体的系列。比如说times,它实际上是多种变形的一个组合。包括,timesregular,timesbold,timesitalic,timesoblique,timesbolditalic,timesboldoblique等。

除了各种特定的字体系列外,CSS还定义了5种通用的字体系列

  • Serif字体Serif是有衬线字体,意思是在字的笔画开始、结束的地方有额外的装饰,而且笔画的粗细会有所不同。css权威指南上的解释是说,字体成比例,上下有短线。如果字体中的所有字符根据其不同大小有不同的宽度,则称该字体是成比例的。Serif的字体容易辨认,因此易读性高。对于中文字体而言,最适合作为正文的有衬线字体是宋体。对于英文而言,常用的是Times New Roman

  • Sans-serif字体Sans-serif是无衬线字体。与衬线字体相反,这种字体通常是机械的和统一线条的,它们往往拥有相同的曲率,笔直的线条,锐利的转角。无衬线字体会比较醒目,但是在行文阅读的情况下并不是很容易辨认。中文里,黑体,幼圆,雅黑就属于无衬线字体。英文里,Arial,Tahoma就是常用的无衬线字体。

一张图区分衬线字体和无衬线字体

立即学习前端免费学习笔记(深入)”;

  • Monospace字体Monospace字体是不成比例的。它通常用于模拟打字机打出的文本。老式的点阵机的输出,甚至是更老式的视频显示终端。采用这些字体,每个字符宽度相等,所以小写的i和小写的m有一样的宽度。他们可能有衬线也可能没有衬线。判别这种字体的唯一标准就是等宽。Monospace字体的例子包括Courier,Courier New,Andale Mono

Monospace字体

  • Cursive字体这些字体试图模仿人的手写体。通常有曲线和sedf字体中没有的笔划装饰组成。比如,Comic Sans,Author等

Cursive字体

  • Fantasy字体这些字体无法用任何特征来定义,只有一点是确定的,那就是我们无法很容易地将其归到任何一种其他字体。比如,Western,Woodblock,Klingon

Fantasy字体

理论上来说,用户安装的任何字体都应该属于以上某个系列,但是也有可能有例外,不过这种例外并不多。

  • 指定字体类型如果你希望文档使用一种无衬线字体,但是你并不关心,到底是用了哪一种字体那么你的代码可以这样写

    Pixlr
    Pixlr

    Pixlr是一款2008年推出的在线图片编辑和AI图片处理工具,目前已推出AI 图像生成器、AI 生成填充、AI 删除背景、AI 删除对象和 AI 图像扩展等现代 AI 工具。

    下载
      body{font-family:sans-serif;}

这样的话,用户代理会自己选择一个无衬线字体,并将其运用到body元素上。

  • 指定字体名如果你有指定的字体,那么可以直接指定字体。

      body{font-family:microsoft yahei;}

这样就会将微软雅黑应用于body元素,如果用户代理找不到微软雅黑这个字体,它只能使用用户代理默认的字体来显示,除此之外,什么都不做。

当然,我们也可以结合使用字体系列和字体名

    body{font-family:microsoft yahei,sans-serif;}

这样在找不到微软雅黑字体的情况下,则会使用另一种无衬线字体。

处于这样的考虑,就很建议在写font-family的时候提供一个通用字体系列,这样,就提供了一个在找不到预设字体时候的备选方案。书写的方法是,确定这些字体的优先顺序,然后用逗号分隔。比如:

    body{font-family:Times,TimesNR,'New Century Schoolbook',Georgia,'New York',serif;}
  • 引号的使用上面的例子中,你可能已经注意到了单引号。当一个字体名中有一个或者多个空格的时候或者字体名包含符号的时候,使用引号。在css2.1中有规范说,包含符号的自提名并不一定要使用引号,但这是一个推荐的做法,类似于“最佳实践”。

  • 加粗大家都知道字体的加粗用的是font-weightfongt-weight可以取值100-900,这些关键字映射的是字体设计时为字体指定的9级粗度。要注意的是,如果在字体设计的时候有指定粗度等级,那么在样式表里写font-weight的值能产生粗细效果。但是如果,字体设计的时候没有指定粗度等级,那么100,200,300,400都将映射到同样的较细变形。700,800,900都将映射到同样的较粗变形。这样问题在实际运用中经常会遇到。400对应于normal,700对应于bold。其他数值不对应于任何变形名。

  • 字体大小百分数值和em的作用一样100%相当于1em,都是相对于父元素的大小来计算。字体大小在继承的时候只继承具体计算值而不是百分数。用百分比来控制字体的缺陷是,因为用户代理在计算出字体大小之后会进行取整操作或者保留一些小数的操作,在百分比计算过多的情况下,字体缩放可能不可控。

  • 风格和变形---风格font-style---italic(斜体)文本和Oblique(倾斜)文本的区别斜体是一种单独的字体风格,对每个字母的结构有了一些小改动。倾斜是基于竖直文本的一个倾斜版本,并没有改动字体结构。在没有italic字体但是有Oblique字体的情况下,会采用后者。但是如果有italic字体但是没有Oblique字体的情况下,用户代理只会用竖直文本计算出一个倾斜版本来生成Oblique字体。---变形font-variant---small-caps要求使用小型大写字母文本。这个与text-transform:uppercase类似。之所以要用一个字体属性来声明small-caps,原因是有些字体在设计的时候有特定的small-caps字体。如果不存在这种字体,用户代理会自己缩放大写字母来创建一个small-caps字体。

  • 拉伸和调整字体font-stretch,允许将字体拉伸font-size-adjust,允许在首选在字体不可用时,对替换字体进行缩放。这两个属性已经在css2.1被去除,因为这两个属性,虽然在规范中存在多年,但是没有一个浏览器实现了它们。

  • 字体匹配css允许匹配字体系列,加粗,变形,所有这些都是通过字体匹配完成的。用户代理匹配字体的步骤大致如下:1、用户代理构建字体属性数据库,一般的这将是用户机器上安装的所有字体,以及用户代理的内置字体等。如果用户代理遇到两种相等的字体,忽略其中一个。2、用户代理取得应用了字体属性的元素,构建字体属性列表,基于这个列表,用户代理先进行第一次筛选,如果完全匹配,则使用这个字体。匹配顺序:根据font-style匹配,匹配italic和Oblique字体;根据font-variant匹配,匹配small-caps字体;根据font-weight匹配;根据font-size匹配

如果经过以上两步没有匹配到字体,那么就会去寻找候选字体。

如果没有候选字体,用户代理将会为给定的通用字体选择一个默认字体。

  • font-face规则关于font-face的介绍:Iconfont玩法

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
Word 字间距调整方法汇总
Word 字间距调整方法汇总

本专题整合了Word字间距调整方法,阅读下面的文章了解更详细操作。

2

2025.12.24

任务管理器教程
任务管理器教程

本专题整合了任务管理器相关教程,阅读下面的文章了解更多详细操作。

2

2025.12.24

AppleID格式
AppleID格式

本专题整合了AppleID相关内容,阅读专题下面的文章了解更多详细教程。

0

2025.12.24

csgo视频观看入口合集
csgo视频观看入口合集

本专题整合了csgo观看入口合集,阅读下面的文章了知道更多入口地址。

29

2025.12.24

yandex外贸入口合集
yandex外贸入口合集

本专题汇总了yandex外贸入口地址,阅读下面的文章了解更多内容。

58

2025.12.24

添加脚注通用方法
添加脚注通用方法

本专题整合了添加脚注方法合集,阅读专题下面的文章了解更多内容。

1

2025.12.24

重启电脑教程汇总
重启电脑教程汇总

本专题整合了重启电脑操作教程,阅读下面的文章了解更多详细教程。

3

2025.12.24

纸张尺寸汇总
纸张尺寸汇总

本专题整合了纸张尺寸相关内容,阅读专题下面的文章了解更多内容。

5

2025.12.24

Java Spring Boot 微服务实战
Java Spring Boot 微服务实战

本专题深入讲解 Java Spring Boot 在微服务架构中的应用,内容涵盖服务注册与发现、REST API开发、配置中心、负载均衡、熔断与限流、日志与监控。通过实际项目案例(如电商订单系统),帮助开发者掌握 从单体应用迁移到高可用微服务系统的完整流程与实战能力。

1

2025.12.24

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号