http://jingyan.baidu.com/article/3065b3b6e9b2d9becff8a4c1.html

首先感谢css9.net照抄原话:

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

  • 首先

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

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

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

  • 然后

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

字体声明如下:

@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>

使用CSS在页面中嵌入字体的更多相关文章

  1. HTML页面中嵌入SVG

    HTML页面中嵌入SVG的几种方式 你有N种理由使用SVG在页面中展示图像,如它的矢量特性.广泛的浏览器支持.比JPEG和PNG更小的体积.可用CSS设置外观.使用DOM API操作以及各种可用的SV ...

  2. 在页面中嵌入svg的几种方法

    //在页面中嵌入svg的方法1:使用 <embed> 标签<embed> 标签被所有主流的浏览器支持,并允许使用脚本.注释:当在 HTML 页面中嵌入 SVG 时使用 < ...

  3. 使用 JavaScript 中的 document 对象的属性,根据下拉框中选择的属性,更改页面中的字体颜色和背景颜色

    查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 document 对象的属性,根据下拉框中选择的属性,更改页面中的字体颜色和背景颜色 实现思路: 在页面的 <body&g ...

  4. 利用CSS的@font-face属性 在网页中嵌入字体

    字体使用是网页设计中不可或缺的一部分.网页是文字的载体,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计. 美工设计师最常做的办 ...

  5. 详解CSS网页布局中默认字体样式

    浏览器默认的样式往往在不同的浏览器.不同的语言版本甚至不同的系统版本都有不同的设置,这就导致如 果直接利用默认样式的页面在各个浏览器下显示非常不一致,于是就有了类似YUI的reset之类用来尽量重写浏 ...

  6. [ActionScript 3.0] 使用Embed在类中嵌入字体

    package { import flash.display.Sprite; import flash.text.Font; import flash.text.TextField; import f ...

  7. css设置input中placeholder字体

    设置input中placeholder字体颜色 input::-webkit-input-placeholder {color:@a;} input:-moz-placeholder {color:@ ...

  8. 在Flex4中嵌入字体

    如果要使用的字体不是系统字体,可以把字体嵌入到Flash中,然后引用该字体.不过字体文件一般都比较大,慎重使用该功能. 官方例子 http://help.adobe.com/en_US/flex/us ...

  9. 通过CSS控制页面中的内容垂直居中的方法

    方法一:通过行高(line-height)定位 line-height通常是用于调节一段文字的行与行之间的距离,或者说两行文字之间的距离,如果行高是500px,那么每一行中的文字距离本行的顶部就是25 ...

随机推荐

  1. apktool介绍

    apktool可以反编译出app的资源文件,apktool工具的下载路径:https://ibotpeaches.github.io/Apktool/ 下载后获取到一个jar文件,可以通过如下命令进行 ...

  2. import的项目结构不对

    问题如下,在我们新导入一个maven项目时,碰到这样的目录结构,总有点别扭,而且在运行Tomcat的时候,突然发现build i选项下面少了两个我们经常使用的两个选项 window  --Perspe ...

  3. day22—一个AngularJS框架应用toDoList

    转行学开发,代码100天——2018-04-07 今天用AngularJS照着课程写了一个案例,即toDoList,记事清单效果. 主要实现以下效果: 1.通过文本框添加内容,同时添加事件列表.主要用 ...

  4. Delphi 文件转换Base64

    uses EncdDecd; function FileToBase64(FileName: string): string; var  MemoryStream: TMemoryStream;beg ...

  5. StringBuilder -字符串缓冲区,节约内层空间变长数组

    package cn.learn; /* 字符串缓冲区 -缓冲可提高效率 java.lang.StringBuilder 字符串的底层是一个被final修饰的数组,不能改变,是一个常量 private ...

  6. html中head示例

    <!DOCTYPE html> <!-- #统一的规范--> <!--类似html这种 ,html标签<html>dasdasd</html>&g ...

  7. JSON —— 序列化与反序列化

    1.JSON 反序列化 JSON 序列化:将服务器端的 JavaBean 对象转换成 JSON 字符串 JSON 反序列化:服务器端得到一个 JSON 字符串,然后将 JSON 字符串转换 JavaB ...

  8. 一、asp的写法

    一.asp的写法  vs从来都不支持asp,但是可以用vscode写,好多年前写asp的时候,用的是dreamwaver,asp还有创建项目这一说法?调试搭个iis就行了   <html> ...

  9. Linux学习之旅(二)Linux文档操作

    目录操作 1. 创建目录 // 目录可以是绝对路径,也可以是相对路径 mkdir 目录名 //创建一个目录 mkdir -p 目录名1/目录名1/... //一次性创建多级目录 2. 删除目录 // ...

  10. 初学Java 数值运算符

    import java.util.Scanner; public class DisplayTime { public static void main(String[] args) { Scanne ...