您的位置：首页 > 其它

网页开发之字体（一）

2015-07-06 20:46 288 查看
前端也接触一年了，最近才开始对浏览器的渲染有所思考，并在继续学习中。

网页中字体的呈现，应该是浏览器在解析<p>some text</p>标签时，从系统中依次查找字体，进而把字体渲染出来。

<html>
<head>
<style>
p { font-family: Arial, Helvetica, sans-serif; }
</style>
</head>
<body>
<p>some text</p>
</body>
</html>

————————————————————————————————————————————————————

安全字体

上述<p>标签定义的字体样式就是一个安全字体。每种操作系统都有自己默认安装的字体，浏览器只能正常显示操作系统中安装了的字体。而不同的操作系统默认安装的字体不完全相同，有的甚至名称都不一样，在这种情况下，我们必须定义安全字体，使字体在所有的浏览器中都能够正常显示。

在上面这个 font-family 的定义中，我们选择 Arial 作为首选字体（注：Arial 字体是最常用的 sans serif 字体，也是 Windows 的默认字体，当字体很小是不容易阅读），但是，苹果系统中没有这个字体，所以我们选择 Helvetica（和 Arial 很相似）作为第二备选字体，最后我们选择 sans-serif 作为第三备选字体，如果在一个既没有 Arial 也没有 Helvetica 的系统里，那么浏览器会使用默认的 sans-serif 字体来渲染文字。这样，我们很大程度上保证了使用不同操作系统的访问者都能看到相同（至少是类似）的页面文字。

除了 Arial，常见的安全字体还有：

Verdana 字体，它是微软公司的核心字体之一，专门为屏幕显示而开发的。它的应用广泛，宽度大而易于阅读，是显示器中最清晰的字体。CSS 写法：font-family: Verdana, Geneva, sans-serif;

Times New Roman 字体，它是最常用的 serif 字体，是浏览器默认的字体。小号字的易读性也很差。CSS 写法：font-family: 'Times New Roman', Times, serif;

有兴趣的读者可以通过这个链接来查阅常用的安全字体。http://www.w3schools.com/cssref/css_websafe_fonts.asp

在网页开发中，应该尽量使用安全字体，也就是高度通用的字体，这样，访问者才能流畅的阅读网页的所有内容。

但是，网页设计师一定不会满足于使用这些安全字体，如何才能使用漂亮的字体，并能在普通用户的浏览器中被正确的渲染出来？答案是：使用@font-face 方案。

@font-face 标签简介
@font-face 被列为了 CSS3 的一项新特性，其实它并不是什么新鲜技术，它最早出现在 CSS2 的规范定义中，但是在 CSS2.1 中又被删除，现在被正式列入 CSS3。目前主流的浏览器（IE 4+/Firefox 3.5+/Chrome 1+/Safari 3.1+/Opera 10+）都能够支持这个属性，所以不用担心会有浏览器兼容性问题。

@font-face 允许您在网页中使用电脑中没有安装的字体，完全摆脱安全字体的限制。只需将字体包安装在服务器上，当用户加载网页时，字体包会自动下载到用户机器上，保证字体能够正确渲染。

随着@font-face 的不断流行，产生了许多新的字体格式图标集，称为网络字体。Google Fonts API 就是基于@font-face 的特性开发的一套优秀的网络字体库。

网络字体的优点有很多：

使用的是真正的文本，而不是图片，放大和缩小都不会影响渲染效果，用户体验好；

可以被搜索引擎辨认；

不像图片每次需要重新生成，添加删除更方便。
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                字体
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航