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

2016-02-20 01:14 5 1 收藏

给自己一点时间接受自己,爱自己,趁着下午茶的时间来学习图老师推荐的CSS网页制作教程:网页中常用的web安全字体,过去的都会过去,迎接崭新的开始,释放更美好的自己。

【 tulaoshi.com - 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年而设的。)

Arial

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

 

2, Arial Black

ArialBlack

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

 

3, Arial Narrow

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

ArialNarrow

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

 

4, Verdana

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

Verdana

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

 

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

Georgia

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

 

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

Times New Roman

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

 

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

Trebuchet MS

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

 

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

Courier New

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

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

 

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

Impact

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

 

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

Comic Sans MS

CSS写法:font-family: 'Comic Sans MS', cursive;

来源:https://www.tulaoshi.com/n/20160220/1633530.html

延伸阅读
标签: Web开发
收藏本站 span style="CURSOR: hand" onClick="window.external.addFavorite('http://www.webjx.com','网页教学网')" title="网页教学网"收藏本站/span 或: script Language="JavaScript" function bookmarkit() { window.external.addFavorite('http://www.webjx.com'...
标签: Web开发
50款CSS工具,包含,CSS网格和布局工具,CSS 优化工具,CSS 菜单生成工具,CSS 按钮生成器,CSS 圆角生成器,CSS 框架,CSS Sprites生成器,CSS 排版工具以及 CSS 表单生成器。 网格和布局 The 1KB CSS Grid 新颖的 CSS 网格工具,可用于简化内容管理系统的页面模板,轻巧易用。 Variable Grid System 基于 960px 的常规CSS网页布局工具...
标签: Web开发
第一步 下面是我们将要动手制作的设计图。在这篇教程里我们只制作首页,不过你可以以此为基础用相同的布局制作内页。 第二步 首先要做的是确定页面结构。随着你对CSS布局的逐步学习,这个过程会变得越来越简单。通过运用大量绝对定位和大幅背景图片,我们可以非常简单地完成这个设计。 什么是绝对定位? 一个HTML元素(比如di...
标签: Web开发
CSS标签重置 对于XHTML+CSS布局起着一个重要的决定性作用,它是提高页面浏览器兼容性的第一步。 那么什么是标签重置呢? 顾名思义,就是对HTML中的所有标签属性重置,因为每个浏览器都有一个自己默认的CSS文件,对HTML中的所有的标签进行定义,以便没有定义CSS的页面能够正常显示在页面,页面在加载的时候如果没有找到自带的CSS文件,浏...
标签: Web开发
在进行DivCSS布局时,需要对文本进行控制,我们在webjx.com以前的文章中,也讲过这方面的知识,今天系统的向大家介绍一下。CSS中控制换行的四种属性。 一、white-space 可以实现HTML中PRE标签的效果,以及单元格的noWrap效果,点此查看示例。 语法: white-space : normal | pre | nowrap 取...

经验教程

892

收藏

53
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部