zoukankan      html  css  js  c++  java
  • 使用@font-face 属性 实现在网页中嵌入任意字体

     字体使用是网页设计中不可或缺的一部分。网页是文字的载体,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计。
      美工设计师最常做的办法是把想要的文字做成图片,这样做有几个明显缺陷:
      一、不可能大范围的使用该字体;
      二、图片内容相对使用文字不易修改;
      三、不利于网站SEO。
      网络上有一些使用sIFR技术、或javascript/flash hack的方法,但实现起来或繁琐,或有缺陷。下面要讲的是如何只通过CSS的@font-face属性来实现在网页中嵌入任意字体。

      首先 
      获取要使用字体的三种文件格式,确保能在主流浏览器中都能正常显示该字体。 


    .TTF或.OTF,适用于Firefox 3.5、Safari、Opera 
    .EOT,适用于Internet Explorer 4.0+ 
    .SVG,适用于Chrome、IPhone


      下面要解决的是如何获取到某种字体的这三种格式文件。一般地,我们在手头上(或在设计资源站点已经找到)有该字体的某种格式文件,最常见的是.TTF文件,我们需要通过这种文件格式转换为其余两种文件格式。字体文件格式的转换可以通过网站FontsQuirrel或onlinefontconverter提供的在线字体转换服务获取。这里推荐第一个站点,它允许我们选择需要的字符生成字体文件(在服务的最后一个选项),这样就大大缩减了字体文件的大小,使得本方案更具实用性。 

    然后
      获取到三种格式的字体文件后,下一步要在样式表中声明该字体,并在需要的地方使用该字体。 
      字体声明如下: 

    div css xhtml xml Example Source Code Example Source Code [www.52css.com]
    @font-face { 
    font-family: 'fontNameRegular'; 
    src: url('fontName.eot'); 
    src: local('fontName Regular'), 
    local('fontName'), 
    url('fontName.woff') format('woff'), 
    url('fontName.ttf') format('truetype'), 
    url('fontName.svg#fontName') format('svg'); 

    /*其中fontName替换为你的字体名称*/ 


      在页面中需要的地方使用该字体: 

     
    p { font: 13px fontNameRegular, Arial, sans-serif; } 
    h1{font-family: fontNameRegular} 


    或者 

    <p style="font-family: fontNameRegular">掬水月在手,落花香满衣。</p>
     
    [本文摘自52css.com]
  • 相关阅读:
    Asp.net 动态添加Meta标签
    【转】在SharePoint Server 2010中更改“我的网站”
    SPQuery DateTime 类型查询
    Asp.net Web Application 打开 SharePoint 2010 Site 错误 The Web application at could not be found
    How To Create SharePoint 2010 Site Collection In Its Own DB
    C# 文件打印
    面试题 java集合
    《深入理解Java虚拟机》(六)堆内存使用分析,垃圾收集器 GC 日志解读
    《深入理解Java虚拟机》(五)JVM调优
    《深入理解Java虚拟机》(四)虚拟机性能监控与故障处理工具
  • 原文地址:https://www.cnblogs.com/z-uu/p/3177335.html
Copyright © 2011-2022 走看看