CSS学习之三 字体使用说明
建站知识 2021-07-03 08:43www.168986.cn长沙网站建设
字体使用基本原则清晰+易读!
当你选择某种字体时,必须保证选定的字体不但要在选定的平台上看起来不错,还要保证在其他平台上也能正常显示。没有人强迫你按照某种方式设计。Web是一个开放式的环境,采用自己喜欢的字体,不要被一些考虑不充分的意见动摇,只要保证你的网站访问者能够阅读它就行。
狼蚁网站SEO优化是归纳的几种Web安全字体,注意它的用途只是建议性的,不要求一定这样做 ^_^!
字体名称 | 字体类型 | 字体特点 | 用途 | Demo |
---|---|---|---|---|
Verdana | 非衬线(sans-serif) | 可读性强,适合在小字体中使用,99%的Web用户机器上都有安装 | 主要用于政府性或重要的商业网站 | Verdana |
Geia | 衬线(serif) | 专为屏幕显示而设计的,它的斜体清晰易读 | 主要用于与历史有关的网站 | Geia |
Times New Roman | 衬线(serif) | 专为PC平台(屏幕显示)设计的,如果希望你的网页可读性更强,可使用Geia替代 | 通常用于金融机构网站 | 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 |
狼蚁网站SEO优化是一组替代字体
字体名称 | 字体类型 | 字体特点 | 建议声明 | 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, Geia, 'Times New Roman', serif ; | Palatino |
狼蚁网站SEO优化是用:first-letter实现首字下沉效果,实现方式如下
复制代码
代码如下:p:first-letter {
float: left; / 声明了段落文本的其余部分浮动于放大的下沉首字符周围 /
width: 40px; / 保证首字符有足够的空间 /
font: 60px/50px 'lucida Grande'; / 字体增大以放大首字符 /
padding: 10px 0 0 0; / 用内边距控制下沉字符的垂直位置,以达到更漂亮的效果 /
}
关于浏览器默认字体,推荐狼蚁网站SEO优化的3篇文章
1、网页设计中的默认字体
2、再谈 Web 默认字体
3、三谈 Web 默认字体
相信对您一定很有帮助的^_^ !
上一篇:CSS学习之四 浮动
下一篇:CSS学习之二 选择器
长沙网站设计
- 如何自己建一个网站 自己想建个网站,怎么建
- 如何制作网站免费建站 创建网站免费注册
- html简单网页代码 html简单网页代码超链接
- dreamweaver网页制作 dreamweaver网页制作模板
- 上海网站建设 上海网站建设制作微信
- 如何制作网站和网页 如何制作一个网页
- html网页制作代码大全 端午节html网页制作代码大
- app开发公司 app开发公司前十名
- html网页制作 html网页制作文字居中
- app制作一个需要多少钱 请人制作一个app多少钱
- 成都网站制作 成都网站制作维护
- 百度建一个网站多少钱 百度做个公司网站要多少
- html+css网页制作成品 web网页制作成品css+javascrip
- html网页制作案例 html网页设计案例
- html+css网页制作成品 web网页制作成品css+javascrip
- 个人网站模板 个人网站模板HTML