css引入特殊字体
在CSS中通过@font-face属性来实现网页中嵌入特殊字体.
首先获取要使用字体的三种文件格式 .EOT , .TTF 或 .OTF , .SVG , 确保能在主流浏览器中都能正常显示该字体.
.EOT,适用于Internet Explorer 4.0+
.TTF或.OTF,适用于Firefox 3.5 , Safari , Opera
.SVG适用于Chrome , IPhone
最常见的是.TTF文件,我们需要通过这种文件格式转换为其余两种文件格式.
http://www.fontsquirrel.com/fontface/generator提供的在线字体转换服务获取字体文件格式的转换.
在css中进行如下声明:
@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');
}
/*其中fontName替换为你的字体名称*/ /*在css中使用这个字体*/
h1{font-family: fontNameRegular}
css引入特殊字体的更多相关文章
- CSS引入外部字体方法,附可用demo
有时候我们做的页面需要用到一些更好看的字体又不想用图片代替,图片会影响加载速度则使用外部字体来显示但是直接通过font-family又不一定全部都行这就需要我们在css中进行定义并且引入字体文件路径然 ...
- 中文字体压缩器-解决css引入的字体太大的问题
字蛛是一个中文字体压缩器 官方网站:http://font-spider.org/index.html 用于解决页面引入的css字体过大的问题 使用方法: npm i -g font-spider 在 ...
- css引入本地字体
1.首先创建一个字体 @font-face { font-family: 'number_font'; //创建一个number_font字体名称 src: url('../../../style/F ...
- CSS引入本地字体与在线字体
有些时候为了强调某些文字,需要使用一些比较特别的字体,CSS中现在也可以比较方便的引入字体了,如下: /* 定义字体 */ @font-face{ font-family: Arista2; src: ...
- css引入第三方字体
上面图片时将字体文件放入到fonts文件夹内, 里面有一个fonts.css文件,将字体文件声明好, 然后像下面图片一样,在另外一个css内@import引入,(当然,也可以直接将声明和引用放在一个c ...
- css引入外部字体使网站字体更美观
@font-face{font-family: myFont;src:url("../font/timesi.ttf");src:url("../font/timesbi ...
- CSS引入外部字体
@font-face { font-family: '综艺体'; font-style: normal; font-weight: normal; src: url(../cs ...
- 不同浏览器css引入外部字体的方式
/** * 字体后缀和浏览器有关,如下所示 * .TTF或.OTF,适用于Firefox 3.5.Safari.Opera * .EOT,适用于Internet Explorer 4.0+ * .SV ...
- CSS引入字体文件
在css引入字体文件可以直接把以下代码复制到css文件中 /* 字体声明 */ @font-face {font-family: 'icomoon';src: url('fonts/icomoon.e ...
随机推荐
- 大数据开发从入门小白到删库跑路(一)- 获取Hadoop
Hadoop是一个可以通过相对简单编程模型实现跨多台计算机集群分布式处理大型数据集的框架.它不是依赖于高额成本的硬件可靠性来提供高可用性,Hadoop的设计能从单个服务器扩展到数千台机器,每个机器提供 ...
- xml的schema约束(Java)
1.schema约束 *dtd语法:<!ELEMENT 元素名称 约束> schema符合xml的语法,是xml语句. 一个xml文件中可以有多个schema,多个schema使用名称空间 ...
- PHP(YII2实现) 微信网页授权
参考地址 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842 实现步骤分析: 获取code->access ...
- centOS下yum报错
CentOS下yum报错 备注:当我们在CentOS下使用yum命令的时候,会报一些错误,一下是我总结的几个解决问题的方法.(保证自己的服务器可以上网) 一.关于Loaded plugins: fas ...
- 《linux设备驱动开发详解》笔记——15 linux i2c驱动
结合实际代码和书中描述,可能跟书上有一定出入.本文后续芯片相关代码参考ZYNQ. 15.1 总体结构 如下图,i2c驱动分为如下几个重要模块 核心层core,完成i2c总线.设备.驱动模型,对用户提供 ...
- python基础小知识,is和==的区别,编码和解码
1.is和==的区别 1)id() 通过id()我们可以查看到一个变量表示的值在内存中的地址 >>> s1 = "Tanxu" >>> s2 = ...
- Python学习:3.Python学习基础
Python基础概念 一.编码 Python解释器加载.py文件中的代码的时候,对内容进行编码,在Python2.x中默认使用的是ASCII,因此我们使用Python2.x版本输出中文的时候,会出现以 ...
- UVA11988 Broken Keyboard (a.k.a. Beiju Text)【数组模拟链表】
参考:https://blog.csdn.net/lianai911/article/details/41831645 #include <iostream> #include <c ...
- POJ 3210 : Coins
参考:https://blog.csdn.net/u010885899/article/details/46636523 http://kqwd.blog.163.com/blog/static/41 ...
- python linecache读取过程
最近使用Python编写日志处理脚本时,对Python的几种读取文件的方式进行了实验.其中,linecache的行为引起了我的注意. Python按行读取文件的经典方式有以下几种: with open ...