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 ...
随机推荐
- 关系型数据库设计——E-R图
一.数据管理技术的三个发展阶段: 1)人工管理阶段(20世纪50年代中期) 特点:数据不保存:应用程序管理数据:数据不共享:数据没有独立性: 2)文件系统阶段(20世纪50年代后—60年代)特点:数据 ...
- notepad++实现python运行
一.先确保windows电脑上先安装python解释器 方法参考:https://www.cnblogs.com/hepeilinnow/p/9727922.html 二.打开notepad++,写一 ...
- linux 查看系统当前时间,修改时间
linux 查看系统当前时间,修改时间1. 查看时间和日期命令 : "date"2.设置时间和日期例如:将系统日期设定成2018年6月8日的命令命令 : "date -s ...
- React中的全选反选问题
全选反选问题 1.在state里维护一个数组,例如showArr:[] 2.绑定点击事件的时候将当前这个当选按钮的index加进来 <span className='arrow' onClick ...
- (四)启用HTTPS
安全规范中有一条是要求尽量使用https而弃用http(新Chrome将标记非HTTPS网站为不安全),其实启用https和之前的ipv6改造一样,并不是什么高难度或者工作流繁多的的改造,只需将中间件 ...
- elasticsearch 5.x 系列之五 数据导入导出
一.首先给大家发一个福利,分享一个elasticsearch 数据导出工具. esm github 源码地址: https://github.com/medcl/esm 下载编译好的对应elastic ...
- 学习photoshop心得
简要的学习了ps的三大功能p图,抠图,作图, p图主要是学了换脸这一效果,用到套索工具,把范冰冰的脸接到郭德纲身上, 首先使用套索工具把脸圈起来 然后移动到 另一个人脸上 再然后混合图层,自动混合 差 ...
- C中 snprintf()函数的作用
函数原型:int snprintf(char* dest_str,size_t size,const char* format,...); 函数功能:先将可变参数 “…” 按照format的格式格式化 ...
- WPF中使用第三方字体选择器
原文:WPF中使用第三方字体选择器 起因 到WPF的字体可以设置的东西变得非常的多,而却没有提供专用的字体选择对话框,甚至于WinFrom的FontDialog也是不能直接用来设置WPF中的字体.解决 ...
- 1826: [JSOI2010]缓存交换
1826: [JSOI2010]缓存交换 https://www.lydsy.com/JudgeOnline/problem.php?id=1826 分析: 简单的贪心,然后调啊调...最近怎么了,码 ...