@font-face格式
@font-face {
font-family: <YourWebFontName>;
src: <source> [<format>][,<source> [<format>]]*;
[font-weight: <weight>];
[font-style: <style>];
}

1、YourWebFontName:此值指的就是你自定义的字体名称,最好是使用你下载的默认字体,他将被引用到你的Web元素中的font-family。如“font-family:"YourWebFontName";”

2、source:此值指的是你自定义的字体的存放路径,可以是相对路径也可以是绝路径;

3、format:此值指的是你自定义的字体的格式,主要用来帮助浏览器识别,其值主要有以下几种类型:truetype,opentype,truetype-aat,embedded-opentype,avg等;这个可有可无。

4、weight和style:这两个值大家一定很熟悉,weight定义字体是否为粗体,style主要定义字体样式,如斜体

示例

  <style type="text/css">
@font-face{
font-family:myFont;
src:url('aaaa.woff') ;
} </style>
<font color="blue" style="font-family:myFont; ">小朋友加油哦,你是最棒的</font>

效果展示

各种格式说明

一、TureTpe(.ttf)格式:

.ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】;

二、OpenType(.otf)格式:

.otf字体被认为是一种原始的字体格式,其内置在TureType的基础上,所以也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】;

三、Web Open Font Format(.woff)格式:

.woff字体是Web字体中最佳格式,他是一个开放的TrueType/OpenType的压缩版本,同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】;

四、Embedded Open Type(.eot)格式:

.eot字体是IE专用字体,可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】;

由于woff字体为最佳格式,如果其他字体不能用,可以把他们转化成woff字体

字体转化网址:https://www.fontke.com/tool/convfont/

为了适用各种浏览器不同字体的书写形式

 @font-face {
font-family: 'YourWebFontName';
src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
url('YourWebFontName.ttf') format('truetype'), /* Safari, Android, iOS */
}

用@font-face应用自定义字体的更多相关文章

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

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

  2. iOS - 使用自定义字体-苹方字体

    苹方提供了六个字重,font-family 定义如下:苹方-简 常规体font-family: PingFangSC-Regular, sans-serif;苹方-简 极细体font-family: ...

  3. CSS 自定义字体

    移动端如何兼容UI给的字体 [toc] 移动端的默认字体 IOS 默认中文字体是Heiti SC 默认英文字体是Helvetica 默认数字字体是HelveticaNeue Android 默认中文字 ...

  4. iOS自定义字体

    1.下载字体库,如:DINCond-Bold.otf 2.双击,在mac上安装 3.把下载的字体库拖入工程中: 4.配置info.plist文件 5.xib方式设置自定义字体:Font选Custom, ...

  5. css3之自定义字体

    使用@font-face自定义字体 我们在浏览国外的一些个人网站时,总是可以发现一些非常个性的字体,比如

  6. TextView的一些高级应用(自定义字体、显示多种颜色、添加阴影)

    1.    自定义字体可以使用setTypeface(Typeface)方法来设置文本框内文本的字体,而android的Typeface又使用TTF字体文件来设置字体所以,我们可以在程序中放入TTF字 ...

  7. Windows Phone:自定义字体在xaml和代码中使用

    最近,我的小应用<认字>更新了一个能发声的版本,朋友对Speech做读音没有兴趣,反而对其中使用的楷体文字表示了兴趣,也许Speech的文章比较多,这次我对这个自定义字体在xaml和代码中 ...

  8. css自定义字体

    @font-face { font-family: 华文隶书; src: url( ../font/STLITI.eot ); /* IE */ src: url( ../font/STLITI.tt ...

  9. Android实现自定义字体

    介绍 最近在看开源项目的时候,发现里面涉及到了自定义字体,虽然自己目前还用不到,但是动手demo笔记记录一下还是有必要的,没准哪天需要到这个功能. 原理 1.其实实现起来非常简单,主要是用到了Type ...

  10. css font-face自定义字体

    font-face:自定义字体 1.找到一个字体文件 2.放入新建的的font的文件夹内: 3.在样式里面以下内容 注释:aa是字体名 <style> @font-face{     fo ...

随机推荐

  1. 代码杂谈-python函数

    发现函数可以设置属性变量, 如下 newfunc.func , newfunc.args def partial(func, *args, **keywords): """ ...

  2. 网鼎杯-Fakebook-反序列化和SSRF和file协议读取文件

    0x00知识点:SSRF SSRF (Server-side Request Forge, 服务端请求伪造) 是一种由攻击者构造形成由服务端发起请求的一个安全漏洞.一般情况下,SSRF攻击的目标是从外 ...

  3. [LuoguP3978](https://www.luogu.org/problem/P3978) BZOJ4001概率论

    BZOJ 4001 概率论 设\(f_i\)表示i个点的二叉树方案数 立刻有\(f_n = \sum_{i=0}^{n-1} f_i f_{n-i-1}\) 设\(F(x)为序列f的生成函数,有F(x ...

  4. 26. docker compose 的安装 和 基本使用

    1. 安装 docker compose https://docs.docker.com/compose/install/  选择linux 即可 sudo curl -L "https:/ ...

  5. 对象创建模式之模块模式(Module Pattern)

    模块模式可以提供软件架构,为不断增长的代码提供组织形式.JavaScript没有提供package的语言表示,但我们可以通过模块模式来分解并组织代码块,这些黑盒的代码块内的功能可以根据不断变化的软件需 ...

  6. ActiveMQ消息队列的搭建

    今天来写下消息队列 一.首先介绍下什么是activeMQ? ActiveMQ 是Apache出品,最流行的,能力强劲的开源消息总线.ActiveMQ 是一个完全支持JMS1.1和J2EE 1.4规范的 ...

  7. 图形化编程娱乐于教,Kittenblock实例,图章效果的音乐画面

    跟很多学生聊过,很多学生不是不努力,只是找不到感觉.有一点不可否认,同样在一个教室上课,同样是一个老师讲授,学习效果迥然不同.关键的问题在于,带入感,我能给出的建议,就是咬咬牙,坚持住,没有学不会的知 ...

  8. Centos8无法安装screen的解决方法:使用epel安装screen

    选择了一个基础款的vps安装的镜像选了熟悉的centos的最新版centos8,但是在安装screen的时候,却安装不了,提示: No match for argument: screen 本来以为是 ...

  9. SpringSecurity过滤器顺序

    https://blog.csdn.net/qq_35720307/article/details/97656608 org.springframework.security.config.annot ...

  10. 03 Mybatis:01.Mybatis课程介绍及环境搭建&&02.Mybatis入门案例

    mybatis框架共四天第一天:mybatis入门 mybatis的概述 mybatis的环境搭建 mybatis入门案例 -------------------------------------- ...