• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > CSS学习之三 字体使用说明

CSS学习之三 字体使用说明

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含字体等相关知识,佚名 希望在学习及工作中可以帮助到您

字体使用基本原则:清晰+易读!

当你选择某种字体时,必须保证选定的字体不但要在选定的平台上看起来不错,还要保证在其他平台上也能正常显示。没有人强迫你按照某种方式设计。Web是一个开放式的环境,采用自己喜欢的字体,不要被一些考虑不充分的意见动摇,只要保证你的网站访问者能够阅读它就行。

下面是归纳的几种Web安全字体,注意它的用途只是建议性的,不要求一定这样做 ^_^!

Web安全字体
字体名称 字体类型 字体特点 用途 Demo
Verdana 非衬线(sans-serif) 可读性强,适合在小字体中使用,99%的Web用户机器上都有安装 主要用于政府性或重要的商业网站 Verdana
Georgia 衬线(serif) 专为屏幕显示而设计的,它的斜体清晰易读 主要用于与历史有关的网站 Georgia
Times New Roman 衬线(serif) 专为PC平台(屏幕显示)设计的,如果希望你的网页可读性更强,可使用Georgia替代 通常用于金融机构网站 Times New Roman
Times 衬线(serif) 针对Mac平台设计的Times New Roman字体,但不是专为屏幕显示而设计的 通常用于金融机构网站 Times
Arial 非衬线(sans-serif) 这种字体设计的网站看起来有现代感,运用广泛,不宜用于小字体 常用语高雅的博物馆网站设计 Arial
Helvetica 非衬线(sans-serif) Mac机上与Arial最相似的字体,是现实世界中一种优良的打印字体,屏幕表现不好 可用于设计新兴传媒公司网站 Helvetica
Tahoma 非衬线(sans-serif) 在安装了Microsoft office的机器上都有Tahoma字体,适用性强,但与Verdana很相似所以用的少 设计商业网站 Tahoma
Comic Sans MS 衬线(serif) 看上去很轻率,是一种不正式的字体 常用于显示一些不滑稽的笑话或打印的邀请函 Comic Sans MS
Trebuchet 非衬线(sans-serif) 屏幕显示效果好,比大多数字体都小,试图用有限的空间显示相同的效果,IE各版本都有 可以用来设计个人公文包 Trebuchet
Courier 等宽字体(Monospace) 在水平、垂直方向排列的都很好,其中Courier New是最常用的当宽字体,但不宜用于过小字体,类似的还有Lucida Console(Windows),American Typewriter(Mac)和Monaco(Mac) 用来显示代码或仿真打印机文本 Courier

下面是一组替代字体:

5种替代字体(候选字体)
字体名称 字体类型 字体特点 建议声明 Demo
Lucida Grande和Lucida Sans Unicode 非衬线(sans-serif) 前者预安装在Mac上,后者XP自带,他们是Verdana优秀替代字体,可读性强 font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif ; Lucida Grande
Lucida Sans Unicode
Futura 衬线(serif) 有很好的现代外观,预安装在Mac OS上,用于大字体时效果更好 font-family: Futura, Helvetica, Arial, sans-serif ; Futura
Helvetica Neue 非衬线(sans-serif) 是Helvetica字体改进的版本,通过各种技巧使得字符之间间隔恰到好处,预安装在大部分平台和软件中 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif ; Helvetica Neue
Gill Sans 非衬线(sans-serif) 在文本和屏幕显示器中可读性都强,结构紧凑、粗体和显示版本是其非常适合用于包装和海报。预安装在Mac OS上 font-family: 'Gill Sans', 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif ; Gill Sans
Palatino 衬线(serif) 安装在Mac OS和Windows上,是一种基于意大利文艺复兴形式的打印体,在文本和显示凸版印刷样式中的效果不错 font-family: Palatino, Georgia, 'Times New Roman', serif ; Palatino

下面是用:first-letter实现首字下沉效果,实现方式如下:

您可能想查找下面的文章:

相关文章

  • 2017-08-06Css样式--字体样式和链接样式详解
  • 2017-08-06css3弹性盒模型实例介绍
  • 2017-08-06IE的CSS制作网页技巧3则
  • 2017-11-06“自适应大小”的div“居中处理”
  • 2017-08-06关于CSS选择器优先级的判断题附结果截图
  • 2017-08-06type=file的inpu美化,自定义上传按钮样式代码
  • 2017-08-06CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
  • 2017-08-06CSS编程中一些值得注意的地方小结
  • 2017-08-06多个css、js文件自动合并、压缩在线工具
  • 2017-08-06CSS3实现圆角、阴影、透明效果并兼容各大浏览器

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 详解CSS3中@media的实际使用
    • 分享几个CSS小众但炫酷的技巧
    • 最全的CSS浏览器兼容问题小结
    • css属性使用中的一些注意事项(实战经验)
    • 让横向排列的几个浮动(float:left)的子div居中显示
    • 详解CSS中@supports的用法
    • 纯css3显示隐藏一个div特效的具体实现
    • CSS Sprites简介以及优缺点
    • input 按钮在IE下显现不一致的兼容问题
    • 用clearfix:after消除css浮动解决外部div不能撑开问题

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有