http://www.fontsquirrel.com/tools/webfont-generator        ttf格式的字体转换成其他格式的字体
 
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引入特殊字体的更多相关文章

  1. CSS引入外部字体方法,附可用demo

    有时候我们做的页面需要用到一些更好看的字体又不想用图片代替,图片会影响加载速度则使用外部字体来显示但是直接通过font-family又不一定全部都行这就需要我们在css中进行定义并且引入字体文件路径然 ...

  2. 中文字体压缩器-解决css引入的字体太大的问题

    字蛛是一个中文字体压缩器 官方网站:http://font-spider.org/index.html 用于解决页面引入的css字体过大的问题 使用方法: npm i -g font-spider 在 ...

  3. css引入本地字体

    1.首先创建一个字体 @font-face { font-family: 'number_font'; //创建一个number_font字体名称 src: url('../../../style/F ...

  4. CSS引入本地字体与在线字体

    有些时候为了强调某些文字,需要使用一些比较特别的字体,CSS中现在也可以比较方便的引入字体了,如下: /* 定义字体 */ @font-face{ font-family: Arista2; src: ...

  5. css引入第三方字体

    上面图片时将字体文件放入到fonts文件夹内, 里面有一个fonts.css文件,将字体文件声明好, 然后像下面图片一样,在另外一个css内@import引入,(当然,也可以直接将声明和引用放在一个c ...

  6. css引入外部字体使网站字体更美观

    @font-face{font-family: myFont;src:url("../font/timesi.ttf");src:url("../font/timesbi ...

  7. CSS引入外部字体

    @font-face {    font-family: '综艺体';    font-style: normal;    font-weight: normal;    src: url(../cs ...

  8. 不同浏览器css引入外部字体的方式

    /** * 字体后缀和浏览器有关,如下所示 * .TTF或.OTF,适用于Firefox 3.5.Safari.Opera * .EOT,适用于Internet Explorer 4.0+ * .SV ...

  9. CSS引入字体文件

    在css引入字体文件可以直接把以下代码复制到css文件中 /* 字体声明 */ @font-face {font-family: 'icomoon';src: url('fonts/icomoon.e ...

随机推荐

  1. Maven里面多环境下的属性过滤(配置)

    情景:通常一个项目都为分为开发环境(dev)和测试环境(test)还有正式环境(prod),如果每次一打包都要手动地去更改配置文件,例如数据库连接配置.将会很容易出差错. 解决方案:maven pro ...

  2. C# WebClient类上传和下载文件

    这篇文章主要介绍了C# WebClient类用法实例,本文讲解使用WebClient下载文件.OpenWriter打开一个流使用指定的方法将数据写入到uri以及上传文件示例,需要的朋友可以参考下   ...

  3. PHP Laravel 5.4 环境搭建

    1.php运行环境搭建 在win10系统上进行搭建的,使用的是wamp环境  wampserver3_x86_apache2.4.17_mysql5.7.9_php5.6.15.exe,安装包中集成了 ...

  4. web学习第一天

    学习web心得 表格 table,表单 form,跑马灯效果 marquee,导入背景图片<img src="图片路径"> 第一天学的不是很难,作业也相对来说比较简单, ...

  5. MFC接收ShellExecute多个参数

    在应用程序开发过程中,我们经常需要带参数启动另一个执行程序,如何传递多个参数,如何解析多个参数呢?   传参数 传递参数可使用ShellExecute函数,示例如下: ShellExecute(NUL ...

  6. python2.7练习小例子(十九)

        19):题目:一球从100米高度自由落下,每次落地后反跳回原高度的一半:再落下,求它在第10次落地时,共经过多少米?第10次反弹多高? #!/usr/bin/python # -*- codi ...

  7. Yarn 调度器Scheduler详解

    理想情况下,我们应用对Yarn资源的请求应该立刻得到满足,但现实情况资源往往是有限的,特别是在一个很繁忙的集群,一个应用资源的请求经常需要等待一段时间才能的到相应的资源.在Yarn中,负责给应用分配资 ...

  8. luogu2387 [NOI2014]魔法森林

    这题和水管局长很像,枚举 \(a\) 的边然后维护关于 \(b\) 的最小生成树就可以了. 1A呐>_< #include <algorithm> #include <i ...

  9. nginx error_page

    1. error_page语法 语法: error_page code [ code... ] [ = | =answer-code ] uri | @named_location 默认值: no 使 ...

  10. Linux - 信息收集

    1. #!,代表加载器(解释器)的路径,如: #!/bin/bash echo "Hello Boy!" 上面的意思是说,把下面的字符(#!/bin/bash以下的所有字符)统统传 ...