@font-face能够加载服务器端的字体文件,让浏览器端可以显示用户电脑里没有安装的字体。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

Firefox, Chrome, Safari, 和 Opera 支持 .ttf(True Type字体)和.otf(OpenType)字体字体类型)。Internet Explorer 9+, Firefox, Chrome, Safari, 和 Opera 支持 WOFF (Web Open Font Format) 字体.

Chrome, Safari 和 Opera 也支持 SVG 字体/折叠.

Internet Explorer 同样支持 EOT (Embedded OpenType) 字体.

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

语法:

@font-face {
font-family : 字体名称;
src : 字体文件在服务器上的相对或绝对路径;
}

这样设置之后,就可以像使用普通字体一样在(font-*)中设置字体样式。

比如:

p {
font-size :12px;
font-family : "My Font";
/*必须项,设置@font-face中font-family同样的值*/
}

css3之字体@font-face的更多相关文章

  1. 【CSS3】字体font

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. css3 web字体记

    css3 web字体 @font-face语法 @font-face能够加载服务器端的字体,让客户端浏览器显示客户端没有安装的字体. @font-face{ font-family:<YourW ...

  3. css3文本字体

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. W3School-CSS 字体(font)实例

    CSS 字体(font)实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 CSS 内边距 ...

  5. Android Studio 3.1.2 修改字体(font)大小(size) 及老版本修改主题、字体、颜色 参照地址

    Android Studio 3.1.2  修改字体(font)大小(size) 步骤:File-Settings-Editor-Color Scheme-Color Scheme Font-Size ...

  6. CSS 字体(font)实例

    CSS 字体(font)实例CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母).CSS 字体系列在 CSS 中,有两种不同类型的字体系列名称: 通用字体系列 - 拥 ...

  7. CSS3 更改字体被选中样式

    CSS3  更改字体被选中样式

  8. css3控制字体动态变换颜色

    css3控制字体动态变换颜色 <!doctype html> <html> <head> <meta charset="utf-8"> ...

  9. CSS3实现字体描边

    CSS3实现字体描边的两种方法 -webkit-text-stroke: 1px #fff;:不建议,向内描边,字体颜色变细,效果不佳: 用box-shadow模拟描边,向外描边,保留字体粗细,赞! ...

  10. css3 自定义字体的使用方法

    @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许 ...

随机推荐

  1. OpenCV-Python Tutorials目录

    版本 3.4.6 1 Introduction to OpenCV OpenCV介绍Learn how to setup OpenCV-Python on your computer! 2 Gui F ...

  2. 2019牛客暑期多校训练营(第七场) E 线段树+离散化

    题目传送门 题意:按照一定的公式给出若干个$<l,r>$,每次往一个序列中加上l到r的数字,并输出中位数. 思路:需要将每个$区间$离散化,比如把$[1,2]$变成$[1,3)$,也就是$ ...

  3. mock.js使用教程

    转载自:https://blog.csdn.net/qq_42205731/article/details/81705350 cdn引入文件 :<script src="http:// ...

  4. flex:1将页面铺满

    代码示范: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  5. mysql 存储过程学习 汇总

    存储过程框架 DEMILITER $$ -- 重定义符 DROP PROCEDURE IF EXISTS store_procedure$$ -- 如果存在此名的存储过程,先删除 CREATE PRO ...

  6. 强连通图缩点——cf999E

    问题转换成缩点求度数为0的点的个数,s点所在联通块作额外处理 缩点写的很烂调了一早上.. #include<bits/stdc++.h> #include<vector> us ...

  7. bsgs+求数列通项——bzoj3122(进阶指南模板该进)

    /* 已知递推数列 F[i]=a*F[i-1]+b (%c) 解方程F[x]=t an+1 = b*an + c an+1 + c/(b-1) = b(an + c/(b-1)) an+1 + c/( ...

  8. SpringBoot_04_SpringBoot对ssm的整合

    1.在SpringBoot框架下对ssm进行整合 2.搭建一个web的SpringBoot框架 2.1添加pom.xml坐标(需要加上SpringBoot对jsp的支持,和对资源文件位置的说明) &l ...

  9. exit与return的区别

    ===========================PHP的解释=========================================================== return ...

  10. day 69 Django基础五之django模型层(一)单表操作

    Django基础五之django模型层(一)单表操作   本节目录 一 ORM简介 二 单表操作 三 章节作业 四 xxx 一 ORM简介 MVC或者MVC框架中包括一个重要的部分,就是ORM,它实现 ...