css使用客户端没有安装的字体语法解决方案

vingoo · 发表于 2015-4-16 00:57:37

在服务器端安装字体是没有办法解决的，因为浏览操作是在客户端，客户端要装该字体才可以。可以用动态字体方案，微软有工具可以制作，到其网站上查一下。但是对于中文字体，下载量太大了，不适合。英文字体的话，还是不错的。

@font-face版本：CSS2　兼容性：IE4+
语法：

@font-face { font-family : name ; src : url ( url ) ; sRules }

复制代码

取值：
name :　字体名称。任何可能的 font-family 属性的值
url ( url ) :　使用绝对或相对 url 地址指定OpenType字体文件
sRules :　样式表定义

说明：
设置嵌入HTML文档的字体。此规则无默认值。
此规则使你能够在网页上使用客户端本地系统上可能没有的字体。 url 地址必须指向 OpenType 字体文件(.eot或.ote)。此文件包含可以转换为 TrueType 字体的压缩字体数据，可以用来提供HTML文档使用该字体，或取代客户端系统已有的同名字体。此文件可以使用 Microsoft WEFT 工具制作。

示例：

复制代码代码如下:

@font-face { font-family:comic;src:url(http://valid_url/some_font_file.eot); }
@font-face { font-family: dreamy; font-weight: bold; src: url(http://www.example2.com/font.eot); }

复制代码

vingoo · 发表于 2015-4-16 01:16:40

Microsoft WEFT 工具说明页
http://www.microsoft.com/typography/web/embedding/weft3/

  Microsoft WEFT 工具下载地址(点击下载)
http://download.microsoft.com/do ... 5284/WEFTIII2b1.exe

  字体嵌入演示
http://www.microsoft.com/typogra ... demos/10/demo10.htm

  使用教程(E文)
http://www.microsoft.com/typogra ... weft3/tutorial.aspx

简单说明一下：先新建一个htm空文档，然后打开WEFT，根据向导，添加刚才新建的htm文件
  然后下一步，会提示程序将分析系统字体，此时不要勾选skip analysis，继续下一步，等程序扫描完毕，出现一个对话框，此时先不着急下一步，点"Add"按钮，选择一个需要制作的字体，只有TrueType的字体可以被制作，选好后下一步。接着选择，生成的ETO字体文件的保存位置下面这个选框比较重要，第一次就是因为没弄清楚，导致无效。这里要输入字体允许被使用在哪些站点内。这个地方建议输入两个域名，一个是：http://127.0.0.1，做为本机测试用，另一个是自己的站点的地址，如：http://www.imagecode.net，设置好后，再下一步直到完成。这样还不算完，找到生成好的EOT文件，放在网站目录里，在需要使用这个字体的页面里，按照下面的方法操作。

<HTML>
<HEAD>
<TITLE>Test Page</TITLE>
<STYLE TYPE="text/css">
<!--
@font-face {
font-family: myfont;
font-style: normal;
src: url(ARIAL0.eot); }
-->
</STYLE>
</HEAD>
<BODY>
<FONT FACE="myfont"> 测试文字</FONT>
</BODY>
</HTML>

复制代码

最后要注意的是在@font-face的时候，font-family最好自己定义一个字体名称，不要跟本机的字体名称一致。否则在<font face='myfont'>的时候，如果EOT字体加载失败，有可能会使用系统字体来显示，这样自己就无法判断是否CSS字体加载成功。其实，字体是否加载成功，在安装了WEFT后，会自动弹出提示。

vingoo · 发表于 2015-4-16 01:13:20

字体使用是网页设计中不可或缺的一部分。经常地，我们希望在网页中使用某一特定字体，但是该字体并非主流操作系统的内置字体，这样用户在浏览页面的时候就有可能看不到真实的设计。美工设计师最常做的办法是把想要的文字做成图片，这样做有几个明显缺陷：
1. 不可能大范围的使用该字体；
2. 图片内容相对使用文字不易修改；
3. 不利于网站SEO（主流搜索引擎不会将图片alt内容作为判断网页内容相关性的有效因素）。

网络上有一些使用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提供的在线字体转换服务获取。这里推荐第一个站点，它允许我们选择需要的字符生成字体文件（在服务的最后一个选项），这样就大大缩减了字体文件的大小，使得本方案更具实用性。

第二步

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

字体声明如下：

@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’);
}

复制代码

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

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

复制代码

vingoo · 发表于 2015-4-16 01:11:35

如何转换生成.ttf.eot.woff.svg@font-face文件
@font-face功能
网页上展示最多的内容是什么？文字！纵然使用图片再多的网页，也不会丢掉文字符号。

@font-face语句是css中的一个功能模块，用于实现网页字体多样性的模块(设计者可随意指定字体，不需要考虑浏览者电脑上是否安装)。

@font-face文件
而由于网页中使用的字体类型，也是各浏览器对字体类型有不同的支持规格。字体格式类型主要有几个大分类：TrueType、Embedded Open Type 、OpenType、WOFF 、SVG。

TrueType

Windows和Mac系统最常用的字体格式，其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体，这使得它们比基于矢量的字体更容易处理，保证了屏幕与打印输出的一致性。同时，这类字体和矢量字体一样可以随意缩放、旋转而不必担心会出现锯齿。

EOT– Embedded Open Type (.eot)

EOT是嵌入式字体，是微软开发的技术。允许OpenType字体用@font-face嵌入到网页并下载至浏览器渲染，存储在临时安装文件夹下。

OpenType(.otf)

OpenType是微软和Adobe共同开发的字体，微软的IE浏览器全部采用这种字体。致力于替代TrueType字体。

WOFF–WebOpen Font Format (.woff)

WOFF（Web开发字体格式）是一种专门为了Web而设计的字体格式标准，实际上是对于TrueType/OpenType等字体格式的封装，每个字体文件中含有字体以及针对字体的元数据（Metadata），字体文件被压缩，以便于网络传输。

SVG(Scalable Vector Graphics) Fonts (.svg)

SVG是由W3C制定的开放标准的图形格式。SVG字体就是使用SVG技术来呈现字体，还有一种gzip压缩格式的SVG字体。

@font-face文件转换生成
.eot、.woff、.svg每种格式的文件都可以用专门的工具转换得到，同时也有专门的用于生成@font-face文件的网站，可以将字体文件上传到网站上，转换后下载，然后就可以嵌入到网页上使用了。

这里推荐几个@font-face文件转换网站：

freefontconverter

font2web

中文@font-face
上面的这些@font-face转换网站都不支持中文字体的转换，中文字体文件相对于英文显得过于庞大，很长一段时间都被认为是不适合嵌入网页的。

直到几年前，这个问题终于被一个日本网站解决了，他用的技术就是截取法，在前端置入一个js脚本，脚本自动根据网页内容适时生成一个小字库（只包含当前网页内容的小字库）然后自动转换成.ttf、.eot、.woff、.svg等格式嵌入网页中，从页实现@font-face效果。体验和英文@font-face差不多，效果非常漂亮。但日文@font-face网站对于中文网页还无法支持。

如果是你想在你的网页上使用中文简体@font-face服务，也不是不可能，推荐一个中文@font-face网站——“有字库”。

使用时，只需要引用一段js脚本代码或者一段css代码，网站就会自动帮你截取网页需要的小字库并生成.ttf、.eot、.woff、.svg等格式文件，你可以将各文件下载下来，也可以托管在这个网站上，非常方便。去试试吧

		自动登录	找回密码
密码			免费注册

[CSS] css使用客户端没有安装的字体语法解决方案

本帖被以下淘专辑推荐:

相关帖子

本帖子中包含更多资源