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 ...
随机推荐
- date 参数(option)-d
记录这篇博客的原因是:鸟哥的linux教程中,关于date命令的部分缺少-d这个参数的介绍,并且12章中的shell编写部分有用到-d参数 date 参数(option)-d与--date=" ...
- sql server,mysql,oracle平时用法的区别
由于工作的原因,上家公司一直使用的oracle,后来接触了的几个项目,既有使用mysql的又有使用sqlserver,自己在使用sqlserver及mysql要实现某功能时,经常要在网上找来找去,所以 ...
- react脚手架搭建1
23:01:17 react脚手架搭建 (个人用的是webstorm,所以分享下webstorm中的创建react脚手架项目的方法) 1.创建新项目(前提是下载nodejs环境) 2.下载好在webs ...
- python3 练习题100例 (二十一)打印一定范围内的水仙花数
题目内容: 水仙花数是指一个n位数 (n≥3),它的每个位上的数字的n次幂之和等于它本身. 例如:153是一个“水仙花数”,因为 153 是个 3位数,而1**3+5**3+3**3==153. 输入 ...
- python并发编程之多进程、多线程、异步、协程、通信队列Queue和池Pool的实现和应用
什么是多任务? 简单地说,就是操作系统可以同时运行多个任务.实现多任务有多种方式,线程.进程.协程. 并行和并发的区别? 并发:指的是任务数多余cpu核数,通过操作系统的各种任务调度算法,实现用多个任 ...
- 嵌入式Linux系统移植(二)——交叉编译工具集
常用工具:readelf.size.nm.strip.strings.objdump.objcopy.addr2line readelf:读可执行文件的elf头 ELF Header: Magic: ...
- HDU 5530:Pipes Selection
题意: 给定长度为\(L\),元素总和为\(S\)的非负整数序列\(A\),对于每一个\(1 \leq i \leq S\),求出:所有满足\(\sum_{j=l}^rA_j=i\)的二元组\((l, ...
- react ant-design自定义图标
ant-design给我们提供的图标不够怎么办呢?答案是我们可以自定义图标. 自定义图标也挺简单的,现在图标推荐用svg格式,那么我们就需要制作svg图片. 下面让我们看看如果制作svg图片吧. 1. ...
- FTP 主动模式与被动模式
项目中涉及到媒资传输的地方,均有ftp应用,而关于媒资传输故障的排查中,FTP主被动模式问题占了较高比例,但又容易被忽略, 特此收集相关资料介绍,同时整理了如何通wget.tcpdum分辨FTP的主被 ...
- RAID(冗余硬盘阵列)
一. RAID定义 RAID( Redundant Array of Independent Disk 独立冗余磁盘阵列 )技术是加州大学伯克利分校1987年提出,最初是为了组合小的廉价磁盘来代替大的 ...