网页设计中常用的19个Web安全字体

来自http://www.jb51.net

 

在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

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;

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;

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

Tahoma

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

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

Courier New

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类似。

Lucida Console

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

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

Garamond

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

16 ,  MS Sans Serif
微软系统自带字体。屏幕显示的像素字体。非衬线字体。

MS Sans Serif

CSS写法:font-family: 'MS Sans Serif', Geneva, sans-serif;
17 ,  MS Serif
微软系统自带字体。屏幕显示的像素字体。衬线字体。
CSS写法:font-family: 'MS Serif', 'New York', sans-serif;

18, Palatino Linotype

Palatino Linotype

CSS写法:font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;

19, Symbol

Symbol

CSS写法:font-family: Symbol, sans-serif;

20, Bookman Old Style

Bookman Old Style

CSS写法:font-family: 'Bookman Old Style', serif;

本文参考了WEB安全字体,希望在Web编写过程中这些核心的Web字体能对你有用。

转载于:https://www.cnblogs.com/seesky/p/3727592.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/258594.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python slice是共享内存吗_python共享内存实现进程通信

1.概述共享内存可以说是最有用的进程间通信方式.两个不同的进程共享内存的意思是:同一块物理内存被映射到两个进程的各自的进程地址空间.一个进程可以及时看到另一个进程对共享内存的更新,反之亦然.采用共享内存通信的一个显而易见的好处效率高,因为进程可以直接读写内存,而不需…

FCN-数据篇

从本篇开始,我们来记录一下全卷积网络用来做语义分割的全过程。 代码:https://github.com/shelhamer/fcn.berkeleyvision.org 下面我们将描述三方面的内容: 1. 官方提供的公开数据集 2. 自己的数据集如何准备,主要是如何标注…

深圳本地网店代运营公司

◆★◆深圳本地网店代运营,淘宝代运营多少钱,微博运营公司,代运营平台,天猫京东代运营,网站代运营图 片, 北京京东代运营,网店代运营协议,京东店铺代运营,网站代运营服务…

搜索专题题解

题目链接: codeforces 277A - Learning Languages 题目描述: 一个团体有n个人,每个人都掌握了一些语言,每个人学一门语言有1个花费,两个人之间可以通过其他人的翻译,问最少花费多少使得这个团体的任意两个人…

Facebook 开源的快速文本分类器 FastTex

FastText是Facebook开发的一款快速文本分类器,提供简单而高效的文本分类和表征学习的方法,性能比肩深度学习而且速度更快。 fastText 原理fastText 方法包含三部分:模型架构、层次 Softmax 和 N-gram 特征。下面我们一一介绍。 1.1 模型架构 …

FCN-加载训练与测试数据

当我们生成了数据后,我们来看看FCN是如何加载数据的。 FCN 代码预览 其中: - data : 训练测试数据 - ilsvrc-nets:存放预训练的模型 - 剩下的框:不同数据集的训练测试prototxt - voc_layers,siftflow_layers等&am…

怎么撤销定时说说_已注册商标遇到撤三申请怎么办

很多企业的商标都遇到过商标撤三的情况,撤三简单的说就是,注册商标没有正当理由连续三年不使用的,任何单位或者个人可以向商标局申请撤销该注册商标。所以说,无论您的企业多大,商标持有的再多,也要做好商标…

windows下架设SVN服务器并设置开机启动

1、安装SVN服务器,到http://subversion.apache.org/packages.html上下载windows版的SVN,并安装,在命令行下运行svn命令,如下所以,则svn服务器安装成功。 C:\Documents and Settings\Administrator>svn 使用“svn …

Spartan-6 FPGA SelectIO Resources User Guide 笔记2 SelectIO Attributes/Constraints

1.Location Constraint 用于分配I/O端口 NET <I/O_NAME> LOC "<EXTERNAL_PORT_IDENTIFIER>"; Example: NET MY_IO LOCR7; 2.IOSTANDARD Attribute 用于选择IO标准如LVCMOS25&#xff0c;LVDS_25等 NET <I/O_NAME> IOSTANDARD”<IOSTANDARD V…

python合并pdf 加书签_Python生成pdf目录书签的实例方法

有时候我们用的一些pdf资料是没有目录的&#xff0c;这样找寻我们想到的东西比较麻烦。本篇文章就为大家带来python来生成pdf目录书签的方法。首先&#xff0c;我们需要下载一个软件FreePic2Pdf,利用它我们可以将我们的pdf文件导入书签工具下载&#xff1a;https://www.jb51.ne…

正则表达式及其在python上的应用

今天学习了一早上正则表达式。如下内容部分转载自《读懂正则表达式就这么简单》 一、什么是正则表达式 正则表达式是一种特殊的字符串模式&#xff0c;用于匹配一组字符串&#xff0c;就好比用模具做产品&#xff0c;而正则就是这个模具&#xff0c;定义一种规则去匹配符合规…

安全专家在硬盘固件中发现NSA的网络间谍程序

本周安全专家在硬盘固件中发现了美国国家安全局&#xff08;NSA&#xff09;的网络间谍程序&#xff0c;这些程序非常难以被检测或者删除。来自卡巴斯基的研究者公布了该恶意程序用来“Phone Home”的URL地址&#xff0c;NSA利用这些随机、凌乱的地址来收集硬盘上的敏感数据。 …

SVN 分支/合并/切换

本文无条理性&#xff0c;仅作自我参考。 花费了两个半下午&#xff0c;走马观花的看了一下说明文档&#xff0c;SVN设计的太复杂&#xff0c;对我这样的&#xff0c;不在一个集体的的业余开发者&#xff0c;要理解起来真是太难了。。。。 分支 Make branches as often as yo…

使用Firefox或Chrome的雇员表现更好不频繁跳槽

一家销售软件帮助雇主招募雇员和留住雇员的公司Cornerstone OnDemand称&#xff0c;使用非默认浏览器如Firefox或Chrome的雇员表现更好不频繁跳槽。 这项研究旨在帮助那些跳槽率过高的行业&#xff0c;比如呼叫中心的年跳槽率高达45%。对50000名在线工作评估参与者的数据进行分…

关于FCN的数据集着色说明

前方我们讲解了《 FCN-数据篇》。里面包含了如何制作类似pascal voc的label。很大篇幅在谈如何着色&#xff0c;如何转化为索引图像。 由于一些内容参考网上的资料&#xff0c;所以对里面的一些操作含义也有些糊涂。 其实网上的东西也不都对&#xff0c;很多人云亦云。所以需要…

mongobd python_Python操作MongoDB数据库PyMongo库使用方法

引用PyMongo复制代码 代码如下:>>> import pymongo创建连接Connection复制代码 代码如下:>>> import pymongo>>> conn pymongo.Connection(localhost,27017)或复制代码 代码如下:>>> from pymongo import Connection>>> conn C…

Android Property Animation动画

3.0以前&#xff0c;android支持两种动画模式&#xff0c;tween animation,frame animation&#xff0c;在android3.0中又引入了一个新的动画系统&#xff1a;property animation&#xff0c;这三种动画模式在SDK中被称为property animation,view animation,drawable animation…

angular实现select的ng-options

ng实现简单的select <div ng-controller"ngSelect"><select ng-model"vm.selectVal" ng-options"o.title for o in vm.optionsData"><option value"">请选择</option></select> </div> var app …

Ubuntu14.04下Mongodb数据库可视化工具安装部署步骤(图文详解)(博主推荐)

不多说&#xff0c;直接上干货&#xff01; 前期博客 Ubuntu14.04下Mongodb&#xff08;离线安装方式|非apt-get&#xff09;安装部署步骤&#xff08;图文详解&#xff09;&#xff08;博主推荐&#xff09; Ubuntu14.04下Mongodb官网安装部署步骤&#xff08;图文详解&#x…

deeplab运行指南

以下仅仅为一个总结&#xff0c;参考了网上的众多资料&#xff0c;仅备忘记。 主要链接 deeplab主页&#xff1a;http://liangchiehchen.com/projects/DeepLab.html官方代码&#xff1a;https://bitbucket.org/aquariusjay/deeplab-public-ver2python 版caffe实现&#xff1a…