正文

@font-face使用在线字体

寻找薛定谔的猫  寻找薛定谔的猫  2022-09-13  416

关键词：

　　@font-face规则在CSS3规范中属于字体模块，该规则的推出对于网页设计来说是一个革命性的进步。在传统设计中，设计师不敢使用各种艺术字体类型，甚至是常规字体也需要慎重使用。因为设计师必须考虑每位浏览者的系统中是否安装了所有字体。有了@font-face规则，这个顾虑就可以放下了：只要在互联网上指定一种字体类型源，而不管用户电脑是否安装该字体，设计的网页都能够正确显示。

　　用较为专业的话来讲，@font-face能够加载服务器端的字体文件，让客户端浏览器显示客户端没有安装的字体。如果没有@font-face规则，浏览器只能够在客户端系统中寻找指定字体，这就给网页设计带来了很多限制，妨碍了设计师的创意设计，也就无法展现丰富多彩的字体艺术。

　　@font-face规则的语法格式如下：

@font-face { <font-description> }

　　@font-face规则的选择符是固定的，用来引用服务端的字体文件。<font-description>是一个属性名值对，格式类似如下样式：

description: value;
description: value;
description: value;
{...}
description: value;

　　属性及其取指说明如下：

font-family：设置文本的字体名称。
font-style：设置文本样式。
font-variant：设置文本是否大小写。
font-weight：设置文本的粗细。
font-stretch：设置文本是否横向拉伸变形。
font-size：设置文本字体大小。
src：设置自定义字体的相对路径或者绝对路径。

　　需要注意的是，低版本IE浏览器只支持微软自有的.eot（Emberdded）字体样式，而其他浏览器都不支持这一格式。不过，从Safari3.1开始，网页重构工程师已经可以设置.ttf（TrueType）和.oof（OpenType）两种字体作为自定义字体了。

　　下面我们来看一个简单的示例：

 /*引入外部字体文件*/
@font-face{
   font-family: myFirstFont;
   /*eot格式兼容IE*/
   src:url(fonts/AdineKirnber.eot);
   /*ttf格式兼容非IE*/
   src:url(fonts/AdineKirnber.ttf);
}
h1{
   font-family: myFirstFont,verdana,sans-serif;
   font-size:4em;
}

运行效果如下：

查看在线运行效果

　　注意：嵌入外部字体的做法对于中文网站来说不太适用。因为一个中文字体文件小的也有几M，大的有十几M，这么大的字体，其下载过程让人难以忍受，同时服务器也不能接受如此频繁的下载请求。所以对于中文来说，如果只是想标题使用特殊字体，最好设计成图片。由于英文字体只有几十kb，与一张图片的大小差不多，如果有大量的文字需要使用该字体，存储、带宽方面就划算多了。

最后，附上两个在线字体转换格式的网站：

font2web：http://www.font2web.com/

freefontconverter：http://www.freefontconverter.com/

无法使用 @font-face 加载字体

】无法使用@font-face加载字体【英文标题】：Unabletoloadfontsusing@font-face【发布时间】：2016-12-2422:54:24【问题描述】：我正在尝试使用@font-face添加“MyriadPro”字体。这是fiddleHTML代码：<h1>TestHeading</h1>CSS代码：@font-facefont-famil... 查看详情

使用 Webpack 和 font-face 加载字体

】使用Webpack和font-face加载字体【英文标题】：LoadfontswithWebpackandfont-face【发布时间】：2018-01-1109:28:03【问题描述】：我正在尝试使用@font-face在我的CSS文件中加载字体，但字体永远不会加载。这是我的目录结构。然后在webpack.config... 查看详情

使用@font-face 定义小型大写字体变体

】使用@font-face定义小型大写字体变体【英文标题】：Definingsmall-capsfont-variantwith@font-face【发布时间】：2013-01-0917:56:29【问题描述】：如何添加小型大写字体作为变体？我正在使用JosBuivenga的Fontin，它的小型大写字母变体是一种单... 查看详情

对 2 种字体使用 @font-face 会导致速度大幅下降

】对2种字体使用@font-face会导致速度大幅下降【英文标题】：using@font-facefor2fontscausingbigslow-down【发布时间】：2011-09-1013:26:46【问题描述】：这是我第一次使用@font-face。字体包来自myfonts.com，我目前正在Safari中进行测试，并通过网... 查看详情

在@font-face 规则中使用 svg 字体文件的确切语法是啥

】在@font-face规则中使用svg字体文件的确切语法是啥【英文标题】：Whatistheexactsyntaxforusingsvgfontfilesin@font-facerules在@font-face规则中使用svg字体文件的确切语法是什么【发布时间】：2017-07-0121:19:56【问题描述】：我正在尝试将新字体... 查看详情

@font-face引入本地字体文件

@font-face{font-family:DeliciousRoman;src:url(‘…/Delicious-Roman.otf‘);font-stretch:condensed;//拉伸font-style:oblique;//斜体font-weight:bold;//粗体}url里写字体文件的路径，在线或者本地的都行。如果引入了重置样式，要在重置里把font-family的值改成你... 查看详情

css3嵌入字体@font-face

语法：@font-face{font-family:字体名称;src:字体文件在服务器上的相对或绝对路径;}通过给服务器嵌入字体，我们就可以在网页上使用我们想要使用的字体了。<style>@font-face{font-family:myFirstFont;src:url(‘Sansation_Light.ttf‘),url(‘Sansation... 查看详情

[转]css自定义字体font-face的兼容和使用

@Font-face目前浏览器的兼容性：Webkit/Safari(3.2+) TrueType/OpenTypeTT(.ttf)、OpenTypePS(.otf)；Opera(10+) TrueType/OpenTypeTT(.ttf)、OpenTypePS(.otf)、SVG(.svg)；InternetExplorer 自ie4开始，支持EOT格式的字体文件；i 查看详情

css3嵌入字体@font-face调用字体

@font-face可以实现从服务器端加载字体，所有浏览器中使用的字体就可以不受本地字体的限制。@font-face真的不是什么新鲜玩意，早在2001年时就被提出来，只不过近两年才被各浏览器广泛支持。而且各浏览器支持的字体文件格式也... 查看详情

错误的 bbox 或使用 @font-face 和 opentype 字体下降

】错误的bbox或使用@font-face和opentype字体下降【英文标题】：Wrongbboxordescentwith@font-faceandopentypefont【发布时间】：2011-06-0300:06:57【问题描述】：我用@font-face嵌入了一个opentype字体。工作正常，但bbox或下降（或基线/下降线？）在某... 查看详情

@font-face 替代字体的字体大小

】@font-face替代字体的字体大小【英文标题】：Fontsizefor@font-facealternative【发布时间】：2012-07-1500:05:36【问题描述】：我正在使用@font-face，它必须具有较大的字体大小。例如标题的字体大小是54像素，这通常是很大的，但在这种字... 查看详情

@font-face使用过程

格式： TureTpe(.ttf)格式：.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOSMobileSafari4.2+】OpenType(.otf)格式：.otf字体被认为是一种原始的... 查看详情

@font-face 不适用于特定字体

】@font-face不适用于特定字体【英文标题】：@font-facenotworkingwithspecificfont【发布时间】：2013-03-0213:29:13【问题描述】：所以我无法让@font-face使用特定字体。是因为字体文件还是我做错了什么？网站链接：http://carlpapworth.com/friday-qui... 查看详情

css3中@font-face模块自定义字体(代码片段)

一、@font-face模块介绍　　@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，在Web的开发中使用字体不再只能使用Web安全字体。1、@font-face语法规则@font-facefont-family:<YourWebFon... 查看详情

@font-face引用指定字体库

创建文件夹font存放指定字体库在css文件中使用字体库： html,bodyfont-family:"MicrosoftYaHei",Arial,Helvetica,sans-serif;@font-facefont-family:dinFont;src:url(font/DIN.ttf);　　使用字体库 .pricecolor:#fe730c;font 查看详情

css3自定义字体_使用@font-face方式实现个性化字体(代码片段)

...义字体的呢？资源网站大全https://55wd.com在css3中可以通过@font-face模块，把自己定义的Web字体嵌入到你的网页，web设计师可以使用他们喜欢的任意字体，只需要把该字体文件存放到web服务器上，它会在需要时被自动下载到用户的计... 查看详情

css使用font-face

@font-face{font-family:‘syht‘;//此处定义字体引用名src:url(‘assets/SOURCEHANSANSCN-NORMAL_0.OTF‘);font-weight:normal;font-style:normal;}body{font-family:‘syht‘;//使用字体引用名} 查看详情

在 Shopify 液体中使用 @font-face 时的字体文件 404

】在Shopify液体中使用@font-face时的字体文件404【英文标题】：Fontfile404whenusing@font-faceinShopifyliquid【发布时间】：2015-10-1702:33:21【问题描述】：我浏览了所有可以在此处和Shopify论坛上找到的帖子，并尝试了一些不同的方法，但遗憾... 查看详情