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. JS高级. 01 复习JS基础

    1. JavaScript 包含: ____, ____, 和 ____. 2. JavaScript 的基本类型有 ____, ____, 和 ____. 3. JavaScript 的复合类型有 ...

  2. js中面向对象(创建对象的几种方式)

    1.面向对象编程(OOP)的特点: 抽象:抓住核心问题 封装:只能通过对象来访问方法 继承:从已有的对象下继承出新的对象 多态:多对象的不同形态 一.创建对象的几种方式 javascript 创建对象 ...

  3. JavaSE基础复习---Class类与反射机制

    ---恢复内容开始--- 目录: 1.java.lang.class类 2.Java中的反射机制 3.运行时与编译时概念 1. java.lang.class类 Java程序在运行时,Java运行时系 ...

  4. 43-Identity MVC:UI

    1-打开之前写的MvcCookieAuthSample项目, 在AccountController新加Register,Login方法 public class AccountController : ...

  5. ABAP CDS ON HANA-(12)ODATA Service

    Create a CDS view and we have the view type as ‘BASIC’ view To publish this as oData, add the annota ...

  6. Android开发——View动画、帧动画和属性动画详解

    0. 前言   Android动画是面试的时候经常被问到的话题.我们都知道Android动画分为三类:View动画.帧动画和属性动画. 先对这三种动画做一个概述: View动画是一种渐进式动画,通过图 ...

  7. Execution Error, return code 1 from org.apache.hadoop.hive.ql.exec.DDLTask. org/apache/hadoop/hbase/

    Execution Error, return code 1 from org.apache.hadoop.hive.ql.exec.DDLTask. org/apache/hadoop/hbase/ ...

  8. "Cannot open source file "Wire.h" " in Arduino Development

    0. Environment Windows 8 x64 Arduino 1.0.5 Visual studio 2012 Visual micro Arduino 1. Steps Add &quo ...

  9. 数据迁移的应用场景与解决方案Hamal

    本文来自网易云社区 作者:马进 跑男热播,作为兄弟团忠实粉丝,笔者也是一到周五就如打鸡血乐不思蜀. 看着银幕中一众演员搞怪搞笑的浮夸演技,也时常感慨,这样一部看似简单真情流露的真人秀,必然饱含了许许多 ...

  10. PostgreSQL 10.0 压缩版的 pgAdmin 不能用的问题

    PostgreSQL终于发布10.0正式版了!下载压缩版的更新了一下本机的版本,然后打开pgAdmin的时候总是报错“The application server could not be conta ...