网页设计中常用的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,一经查实,立即删除!

相关文章

搜索专题题解

题目链接: 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…

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

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

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上的应用

今天学习了一早上正则表达式。如下内容部分转载自《读懂正则表达式就这么简单》 一、什么是正则表达式 正则表达式是一种特殊的字符串模式&#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…

关于FCN的数据集着色说明

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

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…

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

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

tensorboard使用_colab打不开tensorboard的解决办法

2020.4.1更新&#xff1a;colab现在自带tensorboard的魔术方法了&#xff0c;用这个命令就能展示tensorboard%load_ext tensorboard %tensorboard --logdir ./log/train# 加载一次后&#xff0c;如果要重新加载&#xff0c;就需要使用reload方法 %reload_ext tensorboard %tens…

小程序“自定义关键词”功能的常见问答

我们知道小程序可以通过线下扫码、公众号、好友分享、长按小程序码、搜索小程序名称来找到&#xff0c;现在又多了一个新方式——小程序后台新增自定义关键词功能&#xff1a;已发布小程序的开发者&#xff0c;可提交最多10个与小程序业务相关的关键词&#xff0c;帮助你的小程…

语义分割深度学习方法集锦

转载&#xff1a;https://github.com/handong1587/handong1587.github.io/edit/master/_posts/deep_learning/2015-10-09-segmentation.md Papers Deep Joint Task Learning for Generic Object Extraction intro: NIPS 2014homepage: http://vision.sysu.edu.cn/projects/d…

员工培训与开发实训心得体会_公司新员工培训心得体会800字范文

点击蓝字关注我们培训是一次能够快速提升我们的机会&#xff0c;而每个新员工也是通过培训尽快的融入公司的。因此&#xff0c;我们要更加重视培训一些!下面是小编为大家整理的公司新员工培训心得体会&#xff0c;希望对大家有帮助。公司新员工培训心得体会800字为了让我们新进…

Nginx ab压力测试

20-ab压力测试及nginx性能统计模块 优化的启发&#xff0c;打开的文件太多 Nginx 错误日志显示&#xff0c;打开文件数太多 系统层面 more /proc/sys/net/core/somaxconn 单个Nginx 测试index.html 没优化前 [root/home/www]#ab -c 4000 -n 100000 http://test.demo.com/inde…

Code First02---CodeFirst配置实体与数据库映射的两种方式

Code First有两种配置数据库映射的方式&#xff0c;一种是使用数据属性DataAnnotation&#xff0c;另一种是Fluent API.这两种方式分别是什么呢&#xff1f;下面进行一一解释&#xff1a;DataAnnotation的配置方式需要你给定义实体和值对象的类和类中的属性加上与数据库映射相关…

sigmoid函数的数值稳定性

在深度学习中&#xff0c;我们常常选用sigmoid函数作为激活函数。sigmoid函数的具体形式如下&#xff1a; f(x)11e−xf(x)=\frac{1}{1+e^{-x}}曲线表示为&#xff1a; 再画大一点&#xff0c;取x区间更大一些&#xff0c;则为&#xff1a; 显然从图像上看&#xff0c;sigmoid函…

windows远程连接ubuntu 黑屏_Windows跟Windows远程连接传输文件

关注奕奇科技&#xff0c;学习更多小妙招电脑小知识&#xff0c;值得收藏我们一般在使用windows远程连接时需要传输文件该怎么办&#xff1f;我们可以插入U盘导入导出&#xff0c;但这样很是麻烦而且如果身边暂时没有U盘的情况就要通过社交工具传播文件&#xff0c;大的文件也更…

思维导图分析http之前端组成

思维导图分析http前端组成全文总览本文分为三个部分&#xff1a;前端组成&#xff0c;http协议&#xff0c;http服务器应用程序。http的应用按照我自己的理解分为前端应用以及后端应用&#xff0c;所以我分别写了前端组成以及http服务器应用程序两章&#xff0c;中间穿插了一章…