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 ...
随机推荐
- CASE WHEN 小结
1.简单的一个case when 例子: CASE sex ' THEN '男' ' THEN '女' ELSE '其他' END 2. case when 在一整个表为空强行让其显示出一个值,在其后 ...
- 在Windows系统上使用压缩归档文件安装MySQL流程
最近需要做个小小的验证实验,需要安装MySQL,网上一搜发现教程繁多,bug也多,所以直接把官网的流程翻译过来,注意是压缩文件,不是安装版的,解压直接能用的,下面直接把流程贴过来: 使用压缩文档安装在 ...
- Zabbix 3.x中使用Percona Monitoring Plugins监控MySQL
1.下载安装percona-zabbix-templates-1.1.7-2.noarch.rpm 下载地址:https://www.percona.com/downloads/percona-mon ...
- echarts重新加载动画
echarts重新加载动画 var option1 = area_right_top1.getOption();area_right_top1.clear();area_right_top1.setO ...
- Linux 内核之api_man 手册安装
开发环境:Ubuntu18.04,虚拟机virtual box 1.安装XML格式转换 sudo apt install xmlto 2.在内核目录执行 make mandocs 大概持续了半小时 ...
- JS基础知识-01
01-浅谈前端发展史 第一阶段:C/S(client server)->B/S(browser server) 网页制作 技术栈:PhotoShop.HTML.CSS 第二阶段:从静态到动态,从 ...
- 嵌入式linux系统移植(一)
内容: 交叉编译环境 bootloader功能子系统 内核核心子系统 文件系统子系统要点: 搭建交叉编译环境 bootloader的选择和移植 kernel的配置.编译.移植和调 ...
- JavaSE基础复习---2---2018/9/28
目录: 1.数据类型 2.变量 3.数组 1.数据类型 谈到java的数据类型,必须知道java是强类型语言.首先,每个变量有类型,每个表达式有类型,而且每种类型是严格定义的.其次,所有的数值传递,不 ...
- VS2017发布微服务到docker
1.本文档以eShopOnContainers.sevices.identity为描述对象,并包含docker for windows的部分配置流程. 2.前置环境:win10操作系统.安装VS201 ...
- Clean Code 《代码整洁之道》前四章读书笔记
第一章: 整洁的代码只做好一件事 减少重复代码 提高表达力 提早构建简单抽象 让营地比你来时更干净 第二章:有意义的命名 名副其实:如果名称需要注释来补充,就不算是名副其实. ...