CSS学习之三 字体使用说明

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

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


p:first-letter {
float: left; /* 声明了段落文本的其余部分浮动于放大的下沉首字符周围 */
width: 40px; /* 保证首字符有足够的空间 */
font: 60px/50px ‘lucida Grande’; /* 字体增大以放大首字符 */
padding: 10px 0 0 0; /* 用内边距控制下沉字符的垂直位置,以达到更漂亮的效果 */
}

关于浏览器默认字体,推荐下面的3篇文章:

1、网页设计中的默认字体

2、再谈 Web 默认字体

3、三谈 Web 默认字体

相信对您一定很有帮助的^_^ !