CSS字体设计要点解析

  乍一听css字体设置很容易,其实真做起来不然,我们工程师使用全力,他们在不同浏览器调整字体的大小知道的得到合适的结果。实际上有一点深入的理解就能起到很大的作用。

  font-size 属性:

  font-size属性可以被设置给任何一个html标签,即使是不能包含文本的标签也可以设置它,比如:可以被赋值是各种各样滴,比如:绝对,相对,长度值。

  一个元素的font-size属性会自动继承它父节点元素的font-size属性值,除非你覆盖了它。当你给font-size设置相对大小的时候这一点很重要。

  font-size 设置的绝对关键字:

  以下几个绝对字体大小的设置是有效的。当然他们是浏览器预定义设置的。给元素指定了绝对关键字font-size的时候,该元素就不会继承父元素的字体大小。

  font-size: xx-small;

  font-size: x-small;

  font-size: small;

  font-size: medium;

  font-size: large;

  font-size: x-large;

  font-size: xx-large;

  尽管大多数的浏览器支持上面的关键字,但是他们的精确的大小是不相同滴。

  font-size的绝对大小,fone-size能被设置成下面得绝对大小:

  mm: 毫米,例如:10mm.

  cm: 厘米 ,例如:1cm ( = 10mm).

  in: 英寸(inch),例如 : 0.39in ( ~= 10mm).

  pt: point(点), 1pt 相当于 1/72 英寸, 例如: 12pt.

  pc: pica(十二点活字), 1pc 是 12pt

  px: pixel(像素), 例如: 14px.

  一般说来上面得这些度量单位都有些问题。比如:毫米,厘米,英寸是对于不同媒体介质是不精确地,由于分辨率的设置不同,pt和pc就是相对不可靠地。pix来起来是最合适的,但是它能导致一些辅助性问题:IE下不能重新调整字体的大小。

  相对大小:font-size属性能被设置成相对于父节点的字体大小的相对大小。

  em: 1em相当于当前字体的1倍大小的字体。2em相当于当前字体的2倍字体大小的字体。

  %: 100%相当于当前字体大小, 200% 相当于2倍字体的大小。

  ex: 1ex 相当于当前字体中字母 ‘x’高度值一样大小的字体。

  很少的开发者使用ex ,实际上某些情况下ex还是相当好用的,比如当你需要更精确的字体的大小的时候,1ex要比0.525em更好,更精确。

  %和em的值是等价的,比如:50% = 0.5em, 100% = 1em, 120% = 1.2em等等,尽管会有很少的一些浏览器有些微妙的差别,但是毕竟那是很少见的问题。如果你想要保存更小的字节,就需要用更短的名字去定义font-size的值。比如:50%要比0.5em占用字节少,1em要比100%占用的字节少。

  文本字体的大小和页面放缩。

  这是附加复杂深入部分,大多数浏览器允许用户在浏览器中做如下操作:

  增加或减少基本字体大小(图片除外)。

  页面放缩是所有的文字和图片也相应发生放缩变化。

  不但允许字体放缩,而且还允许页面放缩。

  备注(深入理解):在ie中如果页面中的元素的字体被用px(像素)赋值了,那么该元素的字体在页面放缩的时候不会发生变化。

  如果您是有印刷行业背景的设计师将要转移到web设计,那就建议您不要给予用户过多的权利否则他们会打乱您的设计作品。您的设计作品被放大到200%的时候,或者字体减少至50%,就会被破坏掉。

  CSS Font-size 设置建议(规范)

  一般来说,大多数情况下使用em或者%,这样字体就能被浏览器用更精细比例的字体支持。我个人建议使用百分比%来定义font-size大小,这种做法在一些老的浏览器中支持的也会更好。

  当你在开发一个网站的时候有下面的一组建议提供给您:在testing之前,重置所有浏览器的字体的大小。尽量合理的定义字体的大小,以便于在页面放缩的时候页面仍然保持良好的可读性。

时间: 2024-09-19 20:31:32

CSS字体设计要点解析的相关文章

嵌入式开发FPGA设计要点解析

FPGA的用处比我们平时想象的用处更广泛,早期的嵌入式开发FPGA相对比较简单,所有的功能单元仅仅由管脚.内部buffer.LE.RAM构建而成,而LE由LUT(查找表)和D触发器构成,RAM也往往容量非常小.现在的FPGA不仅包含以前的LE,RAM也更大更快更灵活,管教IOB也更加的复杂,支持的IO类型也更多,而且内部还集成了一些特殊功能单元.包括DSP.SERDES.CPU core. 嵌入式开发FPGA.jpg 时钟树 对于FPGA来说,要尽可能避免异步设计,尽可能采用同步设计.同步设计的

Div+CSS网站设计的优点

css|设计 Div+CSS网站设计的优点      业界越来越关注DIV+CSS的标准化设计,大到各大门户网站,小到不计其数的个人网站,在Div+CSS标准化的影响下,网页设计人员已经把这一要求作为行业标准.那么什么是Div+CSS标准?Div+CSS的标准化设计到底有什么好处?      Div 全称 division 意为"区分"使用 DIV 的方法跟使用其他 tag 的方法一样.      <DIV>Very excellent webmaster club www

CSS网页设计技巧:input按钮在IE浏览器的兼容问题

文章简介:CSS网页设计技巧:input按钮在IE浏览器的兼容问题. 这段时间在处理网页默认的input 按钮时,IE下常显现不一致的宽度问题,让人感到很纠结.所以今天请教了几位高手把这个问题解决了,现在贴出来和大家共享一下,当然这个方法在网上曾有人写过,大家可以一起来相互探讨一下. Html Code: <input type="submit"; class="form-submit" value="subscribe" name=&qu

你知道这些css网页设计技巧吗

css|技巧|设计|网页|网页设计 本翻译并未得到作者或网站授权.一切权利都归原作者及原网站所有.如果你得到原作者或原发表网站的授权,可以自由使用本翻译. 1.CSS字体属性简写规则 一般用CSS设定字体属性是这样做的: font-weight:bold;font-style:italic;font-varient:small-caps;font-size:1em;line-height:1.5em;font-family:verdana,sans-serif; 但也可以把它们全部写到一行上去:

视觉设计中的微软雅黑的字体设计

一.雅黑设计理念 雅黑字体是为微软公司设计的屏幕显示汉字.它具有个性独特.结体优美.识别性强.块状效果好.显示清晰等优点.在当今数字化时代更是用途广泛.这副字可以说是科技进步的产物,是人类社会的需要,在设计上也有所突破. 首先打破传统结体方式,采用大字面设计,字怀放开,增大内白,使文字方正,布白匀称.由于字体中宫放开,使文字的适用性也随之增强,不但适合小级数文字的使用,更适合屏幕显示. 在笔型塑造上去除"喇叭头".为防止文字笔划缺乏美感.没有精神,在撇.捺.点.勾的处理上使其粗细有略微

转向移动端UI/UX设计有哪些必知的设计要点

  你手头是否有正在设计的APP项目?有没有系统的设计计划?你是直接动手设计,还是会中途停下来研究一下终端用户的真实需求?你是否知道用户打开APP第一眼到底更希望看到什么? 在考虑运用哪些用户体验相关技术的时候,它们的美学特征可能是相当值得我们深思的.目前我们所看到的许多网站上所使用的设计理念和技巧,其实也可以很好地投入到APP设计中,只不过细节和样式可能需要稍作调整,以适配更小的.高清的屏幕.对于熟知桌面端UI设计的设计师而言,接下来的7个设计要点能帮你快速转向移动端设计,让你看起来像是专业的

css网页设计小技巧

  1.CSS字体属性简写规则 一般用CSS设定字体属性是这样做的: font-weight:bold; font-style:italic; font-varient:small-caps; font-size:1em; line-height:1.5em; font-family:verdana,sans-serif; 但也可以把它们全部写到一行上去: font: bold italic small-caps 1em/1.5em verdana,sans-serif; 真不错!只有一点要提醒

B2C表单和购物流程设计要点

表单设计的要点: 1. 概述 表单对客户来说是很烦人的,但它对在线处理很重要,让填写表单的过程简单.快速,才能让网站快速获取潜在的利益. 2. 访客的问题 你作为访客,在支付中一般会有哪些问题? 当访客遇到表单时,他们的问题集中在外观.所需信息的合理性,以及安全性这几个方面.在对表单快速瞟一眼以后,他们就会思考以下几个问题: 1.我要从哪开始填? 2.填起来很简单么? 3.填起来很费时间么? 4.整个过程中是不是有很多的步骤? 5.页面安全吗? 6.表单要求的信息量是否合理? 一旦访客开始填写表

史上最全的43款字体设计工具大集合

  01. PicLab 利用照片编辑器,快速给照片添加流行的字体. 平台: iOS (iPhone and iPad), Android PicLab 能够利用应用内建的照片编辑器,快速给照片添加流行的字体.可选字体很多,还可以调整位置.不透明度.旋转角度.颜色.装饰等等. 02. A Beautiful Mess 为照片加上漂亮的字体装饰. 平台: iOS (iPhone and iPad) 可选字体很多,效果也很多 03. Typography Live Wallpaper 这款应用内含A