HTML/CSS——@font-face 规则_fontface用法是在css还是html_Starzkg的博客-程序员宅基地

技术标签： CSS  # HTML  @font-face 规则  HTML  CSS3  

在 CSS3 之前，web 设计师必须使用已在用户计算机上安装好的字体。

通过 CSS3，web 设计师可以使用他们喜欢的任意字体。

当您您找到或购买到希望使用的字体时，可将该字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。

您“自己的”的字体是在 CSS3 @font-face 规则中定义的。

浏览器支持

属性 浏览器支持
@font-face

Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。

Internet Explorer 9+ 支持新的 @font-face 规则，但是仅支持 .eot 类型的字体 (Embedded OpenType)。

注释：Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。

format格式

format 是一个可选参数，他的作用是提示该资源 URI 所引用的字体格式，关于字体格式，可以看下面列表：

format 格式 Font 格式 后缀名
truetype TrueType .ttf
opentype OpenType .ttf, .oft
truetype-aat TrueType with Apple Advanced Typography extensions .ttf
embedded-opentype Embedded OpenType .eot
svg SVG Font .svg, .svgz

这堆麻烦的字体格式的出现，是因为各种浏览器对他们的支持程度不一样：

浏览器 支持类型
IE6,7,8 仅支持 Embedded OpenType(.eot) 格式。
Firefox 3.5 支持 TrueType、OpenType(.ttf, .otf) 格式。
Firefox 3.6 支持 TrueType、OpenType(.ttf, .otf) 及 WOFF 格式。
Chrome,Safari,Opera 支持 TrueType、OpenType(.ttf, .otf) 及 SVG Font(.svg) 格式。

使用您需要的字体

在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。

如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：

实例

<style> 
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9+ */
}

div
{
font-family:myFirstFont;
}
</style>

使用粗体字体

您必须为粗体文本添加另一个包含描述符的 @font-face：

实例

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Bold.ttf'),
     url('Sansation_Bold.eot'); /* IE9+ */
font-weight:bold;
}

文件 "Sansation_Bold.ttf" 是另一个字体文件，它包含了 Sansation 字体的粗体字符。

只要 font-family 为 "myFirstFont" 的文本需要显示为粗体，浏览器就会使用该字体。

通过这种方式，我们可以为相同的字体设置许多 @font-face 规则。

CSS3 字体描述符

下面的表格列出了能够在 @font-face 规则中定义的所有字体描述符：

描述符 值 描述
font-family name 必需。规定字体的名称。
src URL 必需。定义字体文件的 URL。
font-stretch
  • normal
  • condensed
  • ultra-condensed
  • extra-condensed
  • semi-condensed
  • expanded
  • semi-expanded
  • extra-expanded
  • ultra-expanded
 可选。定义如何拉伸字体。默认是 "normal"。
font-style
  • ormal
  • italic
  • oblique
 可选。定义字体的样式。默认是 "normal"。
font-weight
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
 可选。定义字体的粗细。默认是 "normal"。
unicode-range unicode-range 可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。

优缺点

优点：图标的颜色可以随意修改，大小也是可以随便控制的，不需要折腾图片与文字的对齐问题，因为他本身就是文字，还可以使用阴影、文字渐变等 CSS3 的效果，总之就像操作一般字体一样处理他们，该有的特点都有。

缺点：慢速网络以及FQ代理下情况特别糟糕。外国很多网站的页面都使用了网络字体，而网络字体下载是需要时间的，有些字体可能还比较大，在下载完毕之前，页面有文字的地方都没有渲染出来，体验不好的情况需要等待三五秒中。不过这种情况还是可以优化的，先用一般字体顶替样式，等下载完毕了再利用 JS 来重新渲染，不过这个代码比较高，而且也不好判断何时下载完成了。

 

参考文章

https://www.w3school.com.cn/css3/css3_font.asp 

http://www.w3.org/TR/css3-fonts/#the-font-face-rule 

http://www.w3help.org/zh-cn/causes/RF1001 

http://www.php100.com/manual/css3_0/@font-face.shtml 

https://www.cnblogs.com/hustskyking/p/manufacture-font-face-in-web.html

http://www.fontsquirrel.com/fontface/generator 
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43272781/article/details/98751492

智能推荐

结合3种无线电接收机架构实现多个灵活模拟带宽以应对不同应用场景_无线电信号接收框架_hongke_weixin的博客-程序员宅基地

三种主要的模拟无线电接收机体系结构是超外差，直接转换和直接数字化。这些架构中的每一种都有其优点和缺点，从而使它们或多或少地适合于特定应用。R55x0-XXX集成了多种接收器体系结构，从而提供了最佳的灵活性并支持各种应用。_无线电信号接收框架

bugku web game1-程序员宅基地

打开题目是一个盖楼游戏害挺好玩（不是一般这种web题里面出玩游戏的题，要么就是很简单的小游戏玩玩就过关了，要么就是要抓包改数据。先看一下源码满足以上条件就可以得到flag这里就直接抓包了抓包以后可以看到红框框是我们要改的地方，score的值要改成多少是随机的，具体看蓝框框里面的数据，sign也要一起改掉，sign的值是蓝框框里面值的base64加密，注意zM不要删掉修改以后repeater就能返回flag...

mysql排序，可以对统计的数据进行排序-程序员宅基地

sqlSELECT a.*,b.name as address_name,b.tel as address_tel,b.province as address_province,b.city as address_city,b.area as address_area,b.detail as address_detail,c.nickname,c.pr..._mysql 统计字段排序

ifconfig manual 中文翻译_ifconfig 汉化-程序员宅基地

原文地址=========以下是本文档完整版本地址:http://sanyk.is-programmer.com/posts/15344(nt: 出现这一提示是为了避免一些网络蜘蛛把文章分成几个页面给查看带来不悦) 中文版======== IFCONFIG(8) Linux 程序员参考手册 _ifconfig 汉化

闪回区大小的更改和闪回的启用 RAC11g_修改闪回区大小-程序员宅基地

节点1：停止数据库：shutdown immediate更改闪回去大小：启动到mout状态：startup mount;查看闪回区大小：show parameter db_recovery_file_dest;修改闪回去大小：ALTER SYSTEM SET db_recovery_file_dest_size=4G scope=both;打开数据库：alter_修改闪回区大小

DevExpress控件学习总结-程序员宅基地

1、Navigation&Layout1.1BarManager如果想在窗体或用户控件（usercontrol)上添加工具条（bars）或弹出菜单（popupmenus），我们需要把一个不可见的控件（component）BarManager（Navigation&Layout）拖放到这个窗体或用户控件上。这个控件维护工具条在窗体上的布局，处理...

随便推点

MTK基站定位_mtk卫星定位弱,请步行到阔地带-程序员宅基地

$GPGGA,hhmmss.ssss,ddmm.mmmm,a,dddmm.mmmm,a,x,xx,x.x,x.x,M,,M,x.x,xxxx*CS$GPGGA,092204.999,4250.5589,S,14718.5084,E,1,04,24.4,19.7,M,,,,00_mtk卫星定位弱,请步行到阔地带

简单工厂模式 单例工厂模式 工厂方法模式 抽象工厂模式 原型模式-程序员宅基地

首先，我们需要了解一下什么是工厂模式，工厂模式就是用来产生对象的类或方法，包括简单工厂模式，单例工厂，工厂方法模式，抽象工厂方法和原型工厂1.简单工厂模式 简单工厂模式一般都是通过静态方法去产生对象的，可以产生任意对象。 示例代码如下： class simpleFactory{ public static function getInstance($classname){

【Linux】用less查看日志文件_less log file-程序员宅基地

> 直接查看文件less catalina.out查看文件后，若文件过大，打通过以下命令滚动文件：j 下一行k 上一行f 向下滚动一屏幕b 向上滚动一屏幕g 定位到文档头部G 定位到文档最尾部退出查看文件q 退出less模式> 带出行号查看文件日志文件一般有上万行，带行号显示会方便很多less -N catalina.out> 查找内容查找关键字内容时，常用向下查找、向上查看.._less log file

3dxmax特效mesh方向-程序员宅基地

当建立超级spray的时候，需要自定义模型，但是方向没发自定义，这时候打个组就行了旋转好方向打组pick Object

Linux下tensorFlow各版本清华镜像以及查看TensorFlow安装版本和路径_tensorflow 官方镜像-程序员宅基地

https://pypi.tuna.tsinghua.edu.cn/simple/tensorflow/_tensorflow 官方镜像

单用户修改root密码--centos6.2_centos6.2单用户修改密码_张望远-长风万里的博客-程序员宅基地

单用户修改root密码–centos6.21、在开机启动的时候能看到引导目录，如下图所示，显示倒计时时，按“e”；2、接下来你可以看到如下图所示的画面，按“e” ；3、用上下键选择最新的内核，然后在按“e”，一般选第二个。4、执行完上步操作后，进入如下界面，删除后面内容，直到“rhgb”。5.在“rhgb”后面点空格增加quiet single，点回车，会回到第三步界面。6.到第三步界面后，按“b”，几秒后即可进入单用户模式。如要修改密码，可输入passwd输入新密码即可，操作完成后_centos6.2单用户修改密码

推荐文章

热门文章

相关标签