CSS网页制作教程:网页中常用的web安全字体

在Web编码中,CSS默认应用的Web字体是有限的,虽然在新版本的CSS3,我们可以通过新增的@font-face属性来引入特殊的浏览器加载字体,但多数情况下,考虑各个因素的影响我们还是在尽量充分利用这些默认调用的字体实现CSS的编写,这里整理了19个Web安全字体,让你无需任何顾虑的情况下畅快使用。

1,  Arial

微软公司的网页核心字体之一,最常用的sans serif字体,当字号很小时不容易阅读。但是,大写的“I”和小写的“l”是无法区别的,你可以考虑用Tahoma字体来替代。
(苹果系统没有这种字体,但有一种对应于Arial的字体叫Helvetica,它是MAC机上与Arial 字体最相似的WEB字体,是别一种非衬线字体.它是一种性能优良的打印字体,但在屏幕上表现不是很好,说道Helvetica字体,昨天发现了很多有意思的站点,主要是纪念Helvetica字体诞生50年而设的。)

CSS写法:
font-family: Arial, Helvetica, sans-serif;

2, Arial Black

CSS写法:font-family: ‘Arial Black’, Gadget, sans-serif;

3, Arial Narrow

CSS写法:font-family: ‘Arial Narrow’, sans-serif;

4, Verdana

微软公司的网页核心字体之一,微软公司专门为屏幕显示而开发的。应用广泛。易于阅读。是显示器中最清晰的字体,即使字号很小,也很容易阅读。半肥猫比较喜欢采用10PX的Verdana来做英文正文字体,也推荐大家使用,但字号最好介于10~14像素之间,超出这个范围就不好看了。

CSS写法:
font-family: Verdana, Geneva, sans-serif;

5,  Georgia
微软公司的网页核心字体之一,可用性好。可读性比Times New Roman强。是网站设计中,浏览效果最好的serif字体,因为它是专为网上阅读设计的。)

CSS写法:
font-family: Georgia, serif;

6,  Times New Roman
微软公司的网页核心字体之一,可能是最常用的serif字体,是网站浏览器默认的字体,12pt以上的字体容易阅读,但小字号的字体易读性差。(苹果系统没有这个字体,有一个对应于Times New Roman的字体叫Times)

CSS写法:
font-family: 'Times New Roman', Times, serif;

7, Trebuchet MS
微软公司的网页核心字体之一,与Arial相似,半肥猫觉得:Trebuchet MS比Arial看起来优雅、古典一点。可以用来做标题,但小字号阅读起来会很困难(低于13PIX阅读起来就很累了,不太推荐用来做正文字体)。在苹果系统上也可以用Helvetica做替代。

CSS写法:
font-family: 'Trebuchet MS', Helvetica, sans-serif;

8 , Courier New
微软公司的网页核心字体之一,老式打印机字体,有一种独特的机械工整感觉。呈现计算机编码时,还会用到这种字体。12 pt的Courier New字体曾是美国国务院的公文标准字体,但于2004年1月停用,改使用14 pt的Times New Roman,因为其具“现代性”和“易读性”。

CSS写法:
font-family: 'Courier New', Courier, monospace;

9,  Impact
微软公司的网页核心字体之一,Impact是1965年发表的一个无衬线字体,其特粗的笔画、紧缩的间距。半肥猫觉得:字体较为粗犷,适合使用在标题上,而不常用在内文。

CSS写法:
font-family: Impact, Charcoal, sans-serif;

10,  Comic Sans MS
微软公司的网页核心字体之一,手写体。这是一种争议很大的字体,讲实话,半肥猫也不喜欢这个字体,一点美感都没有,不过在一大堆规规矩矩的字体里面,有这么一个随意性比较的字体,可以变换一下口味,也算不错吧,建议不要用在正规的金融、政府、商业机构站点。

CSS写法:
11,  Tahoma
Tahoma是一个十分常见的无衬线字体,Tahoma和Verdana师出同为名设计师马修·卡特的作品,由微软在1999年推出,被采用为Windows 2000、Windows XP、Windows Server 2003等系统的默认字型。半肥猫觉得:它的字体结构和Verdana很相似,其字符间距较小,用来作为标题,效果好过Arial(Tahoma的大写I 和小写l比Arial容易识别),但如果作为正文,他的字号不能小于13PIX,否则很多笔画粘连到一起,不利于阅读。

CSS写法:
font-family: Tahoma, Geneva, sans-serif;

12,  Courier
Courier是一个等宽字体的粗衬线字体,主要是依据打字机所打印出来的字型来设计。原来Courier New的字体是IBM公司在1950年代设计给打印机使用的字体,后来这个字型成为整个打字机制造业的标准。Courier New是Courier的变体,比Courier更具机械味道。

CSS写法:
font-family: Courier, monospace;

13,  Lucida Sans Unicode
是一种OpenType型的无衬线字体 。1993年制作并随微软公司的Windows NT 3.1操作系统发布。有较大的x字高,具有很好的可读性,被广泛用于显示、出版等各种用途。
它支持Unicode2.0版本的基本字符,包括拉丁字母,希腊字母,西里尔字母,希伯来字母,以及国际音标字符。该字体是首个 Unicode代码的字体, 该字体从Windows 98开始一直作为系统预装字体发行。
后来发布的 Lucida Grande字体作为苹果公司Mac OS X系统的默认字体发布。
CSS写法:
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;

14, Lucida Console
同Lucida Sans Unicode类似。

CSS写法:
font-family: 'Lucida Console', Monaco, monospace;

15,  Garamond
Garamond(加拉蒙德)是一类西文衬线字体的总称,自16世纪40年代开始至今,有很多家公司和很多设计师参与到Garamond字体设计,如: Adobe Garamond, Monotype Garamond, Sioncini Garamond,和 Stempel Garamond等等。半肥猫觉得:字体给人端庄典雅,有些古典的感觉,在博物馆和历史性悠久的项目中使用,应该可以获得不错的效果。

CSS写法:
font-family: Garamond, serif;

时间: 2024-11-08 21:37:51

CSS网页制作教程:网页中常用的web安全字体的相关文章

《ASP网页制作教程》笔记

笔记|教程|网页 <ASP网页制作教程>.王国荣 编著,人民邮电出版社. 打开MDB数据库的方法:先定义一个OpenMDB子程序,然后在主程序中调用.<%Option ExplicitSub OpenMDB(dbname,pwd,conn)'dbname-数据库文件的相对路径,pwd-数据库文件的密码,conn-用户定义的Connection对象.'对于没有密码的数据库,pwd值可任意.dim connstrSet conn = Server.CreateObject("ADO

CSS网页制作教程:CSS文字单位PX、EM、PT

文章简介:但是12px汉字例外,就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小,而是稍大一点.这个问题 Jorux已经解决,只需在body选择器中把62.5%换成63%就能正常显示了.原因可能是IE处理汉字时,对于浮点的取值精确度有限.不知道有没有 其 这里引用的是Jorux的"95%的中国网站需要重写CSS"的文章, 题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很

网页制作教程:用CSS实现网页布局

css|教程|网页 页面布局 用CSS 来布局很容易.如果你已经习惯用表格布局的话,起先会感觉比较困难.其实不难,只不过动机不同,并且在实践中更有意义. 你可以把这一页面的各个部分当作独立的版块来看待,无论你选择哪一块.你可以绝对或相对地用彼块取代此块. 定位 定位属性position用于定义一个元素是否absolute(绝对),relative(相对),static(静态),或者fixed(固定). static值是元素的默认值,它会按照普通顺序生成,就如它们在HTML的出现一般. relat

网页制作教程:认识CSS的伪类

css|教程|网页 认识css的伪类 伪类(Pseudo classes)是选择符的螺栓,用来指定一个或者与其相关的选择符的状态.它们的形式是selector:pseudo class { property: value; },简单地用一个半角英文冒号(:)来隔开选择符和伪类. CSS很多的建议并没有得到浏览器的支持,但有四个可以安全使用的用在连接上的伪类. link用在为访问的连接上. visited用在已经访问过的连接上. active用于获得焦点(比如,被点击)的连接上. hoverhov

网页制作教程:CSS 命名规范

css|规范|教程|网页 XHTML-CSS写作建议 所有的xhtml代码小写 属性的值一定要用双引号("")括起来,且一定要有值 每个标签都要有开始和结束,且要有正确的层次 空元素要有结束的tag或于开始的tag后加上"/" 表现与结构完全分离,代码中不涉及任何的表现元素,如style.font.bgColor.border等 <h1>到<h5>的定义,应遵循从大到小的原则,体现文档的结构,并有利于搜索引擎的查询. 给每一个表格和表单加上一

Dreamweaver网页制作教程:常用工具栏

dreamweaver|教程|网页      "插入"栏 "插入"栏包含用于创建和插入对象(如表格.层和图像)的按钮.当鼠标指针滚动到一个按钮上时,会出现一个工具提示,其中含有该按钮的名称. 某些类别具有带弹出菜单的按钮.从弹出菜单中选择一个选项时,该选项将成为该按钮的默认操作.例如,如果从"图像"按钮的弹出菜单中选择"图像占位符",下次单击"图像"按钮时,Dreamweaver 会插入一个图像占位符.每当

Dreamweaver网页制作教程:表格设计

dreamweaver|教程|设计|网页 表格设计 表格是现代网页制作的一个重要组成部分.表格之所以重要是因为表格可以实现网页的精确排版和定位.本节教程我们分为两步来进行.首先看表格操作的一个实例.然后来看一些表格操作的基本方法.在开始制作表格之前,我们首先对表格的各部分的名称做一个介绍.(看下图) 一张表格横向叫行,纵向叫列.行列交叉部分就叫做单元格. 单元格中的内容和边框之间的距离叫边距.单元格和单元格之间的距离叫间距.整张表格的边缘叫做边框. 下面看看我们使用表格制作的页面的实例 这幅页面

Dreamweaver网页制作教程:超级链接

  超级链接 作为网站肯定有很多的页面,如果页面之间彼此是独立的,那么网页就好比是孤岛,这样的网站是无法运行的.为了建立起网页之间的联系我们必须使用超级链接.称"超级链接",是因为它什么都能链接,如:网页.下载文件.网站地址.邮件地址--等等.下边我们就来讨论怎样在网页中创建超级链接. [页面之间的超级连接] 在网页中,单击了某些图片.有下划线或有明示链接的文字就会跳转到相应的网页中去. 1.在网页中选中要做超级链接的文字或者图片. 2.在属性面板中单击黄色文件夹图标,在弹出的对话框里

动态网页制作技术JSP中“预定义变量”的使用

js|变量|动态|网页 动态网页制作技术JSP技术 初级教程 "预定义变量"如何使用 JSP教程 为了简化JSP表达式和scriptlets中的代码,提供了8种自动定义的变量,有时称做implicit objects(固有对象).它们是:request,response,out,session,application,config,pageContext,和 page.下面我们来详细的了解它们. request 与request相联系的是HttpServletRequest类,使您可以