设计网页字体css,css教程:网页字体及字体大小的设计
css教程:网页字体及字体大小的设计
互联网 发布时间:2008-10-17 19:26:27 作者:佚名 我要评论
在设计网络应用时,您必须决定如何编辑字体。使用CSS时存在大量选项,每个开发者都有自己的喜好。本文主要讨论字体大小和网络应用内的操作。在开发网络应用时,没有比外观更重要的事情了。所以,如果发现设计人员十分关注字体及字体大小,我不会感到奇怪!
字体
在设计网络应用时,您必须决定如何编辑字体。使用CSS时存在大量选项,每个开发者都有自己的喜好。本文主要讨论字体大小和网络应用内的操作。在开发网络应用时,没有比外观更重要的事情了。所以,如果发现设计人员十分关注字体及字体大小,我不会感到奇怪!
字体大小
CSS2规范根据长度——水平和垂直尺寸——来定义字体。这个长度为一个数值,前面可能带一个可选的加( )或减(-)标记符。另外,该数值后可能有一个可选的单位标识符。
另外,CSS2规范定义了两个单位类型:绝对单位和相对单位。绝对值指定单位,而相对单位指定一个与另一个值成比例的值。下面的列表列出了相对单位标识符:
em:元素字体的高度。它与使用该字体的元素的字体大小属性计算值相等。当它出现在字体大小属性值本身中时,会出现异常,这时它指母元素的字体大小。
ex(x-高度):CSS2规范将它描述为小写字母x的高度。
px(像素):它与背景或屏幕的分辨率有关。根据显示器分辨率输出不同像素,由于用户的喜好不同,显示器的分辨率可能会有很大差异。
下面是有效的绝对单位标识符:
in(英寸)
cm(厘米)
mm(毫米)
pt(点,1点=1/72英寸)
pc(12点活字,1pc=12点)
测量绝对大小的另一种方法是使用衡量一个值的比例因数,应用以下关键字:最小、较小、小、中、大、较大和最小。中为基值,变小就减去一个因数,变大就增加一个因数,等等。CSS2规范定义的比例因数为1.2,这个值也可能依浏览器而变化。
还可以应用百分比值来格式化文本。百分比值是一个可选的标记符,即数字后带有一个百分比符号(%)。百分比值总是与另一个值成比例。就字体而言,它与网页的基本字体大小成一定比例。
如您所见,有许多方法可完成呈现文本这个看似简单的任务。下面的HTML格式文本(在段落元素中)应用了各种单位标识符。其中所有的值都相等,并假定以72dpi进行显示。
Font Sizing - equal values
Point
Pica
Inches
Centimeters
Millimeters
Percentage
您可以在这个列表中增加像素值,但它的值要依环境而定。例如,我的分辨率为1280X1024的手提电脑将显示与在上表中使用50像素值一致的文本。
仔细阅读前面提到的CSS2规范,可以获得更多字体大小方面的知识。现在我将讨论如何决定在网络应用中使用哪种方法。
选择哪一种方法
在CSS中有许多和字体有关的选项,但哪一种最适合在您的网络应用中使用呢?绝对大小有许多缺陷,特别是在一致性、灵活性与访问性方面存在问题。与绝对字体大小相比,任何视力有缺陷的用户可使用相对字体大小来扩大页面中的文字,这样更便于阅读。因此,开发者经常使用相对大小。
让我们来详细了解一下相对大小:
像素是最通用的大小值。多数浏览器都支持它,但也并非总是如此。浏览器常常将像素当作屏幕像素而非CSS像素来处理。像素的一个缺点在于,它忽略或否定用户的喜好,且不能在IE中调整大小。
许多开发者偏爱用点来衡量字体大小,但点主要用于桌面印刷系统,不方便移植到网络中。在呈现文本时,操作系统或浏览器默认使用像素。
最常用的方法是使用em或百分比大小。EM可在所有支持调整尺寸的浏览器中进行调整。Em还与用户偏爱的默认大小有关。在IE中应用em的结果难以预料。在IE中最好使用百分比来设定文本大小。
下面的例子结合使用em和百分比值来对文本进行格式化。基本文本用百分比值来设置,然后用em来进行调整。
Display Test
body {font: Sans Serif, Arial; font-size: 110 %}
Basic text.
Larger text.
smaller text.
全都与外观有关
现有的标准提供许多格式化并呈现网络应用中的文本的方法。开发者可以很方便地将文本分解成相对和绝对标识符。关键在于保持一致,并彻底检测解决方案。
相关文章
这篇文章主要介绍了关于CSS浮动与取消浮动的问题,通过设置元素脱离正常的文档流让元素靠左或向右靠近,通过设置文字包周围图片来解决浮动问题,具体解决方法跟随小编一起2021-06-28
本文介绍了什么是 ::marker 以及它的一些实用场景,可以看出虽然 ::before 、::after 也能实现类似的功能,但 CSS 还是提供了更具有语义化的标签 ::marker,也表明了大家需2021-06-25
很多前端的初学者,在使用margin的之后或许会遇到一些问题,本文主要介绍了margin塌陷和margin合并,需要的朋友们下面随着小编来一起学习学习吧2021-06-24
当我们想写一个类似掘金的文章或者自己的博客的时候,是否有想过该怎么实现给自己文章的章节添加章节号,本文就来介绍一下使用CSS实现章节添加自增序号的方法,感兴趣的可2021-06-23
本文主要介绍了CSS变量实现主题切换的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2021-06-23
本文就将介绍一些使用单标签绘图的技巧,并且使用这些技巧,借用单个标签去实现一些复杂图形,本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧2021-06-16
这篇文章主要介绍了CSS几步实现赛博朋克2077风格视觉效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2021-06-15
今天来带大家做一个可爱的滑动导航栏效果,这个demo很基础,但是使用场景非常广泛,感兴趣的小伙伴们可以参考一下2021-06-15
大家都知道Calc方法有个很大的好处就是用在流体布局上,可以通过calc()计算得到元素的宽度,本文通过一个例子给大家详细介绍,需要的朋友参考下吧2021-06-03
本文将给大家介绍使用 CSS prefers-* 规范提升网站的可访问性与健壮性的相关知识,在css媒体查询中新增的几个特征功能,本文也给大家详细介绍,需要的朋友可以参考下2021-05-25
最新评论
设计网页字体css,css教程:网页字体及字体大小的设计相关推荐
- 【前端实例代码】使用 HTML CSS实现指纹扫描仪特效动画效果 |前端开发 网页制作 基础入门教程 网页开发中常见的样式与特效,收藏起来肯定用的上~
b站视频演示效果: [web前端特效源码]使用 HTML CSS 和 JavaScript 实现指纹扫描仪特效动画效果 |前端开发 网页制作 基础入门教程 效果图: 完整代码: <!DOCTYP ...
- css入门教程 网页首字下沉,CSS制作首字下沉_CSS Inline Layout Module, initial-letter, CSS3 教程_w3cplus...
在杂志排版中,常常能看到首字下沉的效果. 在Web的排版中,也常常能看到上图这样的效果.并且常常看到的是首段首字下沉.那么今天这篇文章咱们来聊聊如何使用CSS实现首字下沉效果. ::first-let ...
- Linux 网页挂马实验,网页挂马详细教程
网页挂马详细教程 网页挂马详细教程 其实很简单的的,说到原理,就一个:就是在人家网站的主页那里插入一个自己的网马的页面,等有漏洞的人查看了人家网站的主页,那么他就成了你的肉鸡了.. 下面我介绍5种方法 ...
- CSS(网页样式语言)基础,网页CSS设计样式基础知识点 小白教程
什么是CSS? CSS由哈坤·利在1994年提出,到1996年正式完成了CSS语言,并且在1998年收录到W3C组织. CSS(Cascading Style sheet),用于控制网页样式,并允许将 ...
- css限制字体三行_CSS美化网页
一.字体样式 font-family:设置字体类型,可以同时声明多种字体,字体之间用英文逗号分隔开: font-size:设置字体大小,常用单位为px,还有其他如in.cm.mm.pt.pc等单位: ...
- HTML字体怎么显示,教你如何用CSS来控制网页字体的显示样式
教你如何用CSS来控制网页字体的显示样式 更新时间:2007年02月27日 00:00:00 作者: HTML对于<font>内容</font>卷标只有: <font ...
- 【网页制作】CSS文本和字体属性讲解【附讲解视频】
1.CSS文本和字体属性的作用:给文本和字体设置样式(具体看第二部分) 注意:在html中我们可以省略单位,但CSS中不可以省略单位. 简单的说大多数情况在html的body标签中我们可以省略单位,但 ...
- word中字体大小(pt)与网页中css设置font-size时用的px大小对应关系
word中字体大小(pt)与网页中css设置font-size时用的px大小对应关系 pt与px转换关系为 1px= 0.75pt. 所以word中五号字体(10.5pt)在网页中对应的font-si ...
- html网站开发实例教程,网页设计与开发——HTML、CSS、JavaScript实例教程
网页设计与开发--HTML.CSS.JavaScript实例教程[编辑] 作 者:郑娅峰 主编 出 版 社:清华大学出版社 出版时间:2009-7-1 版 次:1 页 数:309 字 数:509000 ...
- 微软雅黑html中怎么写,网页中使用微软雅黑字体(css调用微软雅黑)
方法一: .selector {font-family:"Microsoft YaHei",微软雅黑,"Microsoft JhengHei",华文细黑,STH ...
最新文章
- 中文 Markdown 编写格式规范的命令行工具 lint-md
- 快速傅里叶变换(FFT)算法【详解】
- POJ_2104 K-th Number 【主席树】
- MVC源码学习之AuthorizeAttribute
- 我的博客园css样式
- python带界面的人脸识别_PyQt5+Caffe+Opencv搭建人脸识别登录界面
- java设计模式之用王者荣耀打开观察者模式(附代码实例)每天一学设计模式
- 时间复杂度与空间复杂度-o(1)、o(n)、o(logn)、o(nlogn)、斐波那契
- 第4章_1——SQL语句实现MySQL增删改查
- Gerix Wifi Cracker破*wifi
- ELK - docker
- 双基因突变患者_一例 Kallmann 综合征患者双基因突变分析
- 【C语言】函数详解第一期,函数基础
- 【技术知识】SVAC 2.0安全技术浅析
- 浅记录一下MATLAB安装心得
- jQuery获取(设置)自定义属性值
- warning C4996(转)
- 工业相机的机械快门与电子快门有什么区别?
- Win10家庭版如何正确关闭自动更新
- 奇怪的c语言float类型