首先获取要使用字体的三种文件格式.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中通过@font-face属性来实现网页中嵌入特殊字体。的更多相关文章

  1. 利用pandas库中的read_html方法快速抓取网页中常见的表格型数据

    本文转载自:https://www.makcyun.top/web_scraping_withpython2.html 需要学习的地方: (1)read_html的用法 作用:快速获取在html中页面 ...

  2. @font-face(css3属性)实如今网页中嵌入随意字体

    @font-face语法规则 @font-face { font-family: <YourWebFontName>; src: <source> [<format> ...

  3. HTML中的鼠标光标属性

    在网页中默认的鼠标指针只有两种,一种是最普通的箭头,另一种是当移动到链接上时出现的“小手”.但现在越来越多的网页都使用了CSS鼠标指针技术,当将鼠标移动到链接上时,可以看到多种不同的效果.CSS可以通 ...

  4. 使用jquery获取网页中图片的高度——解惑

    jQuery获取网页中图片的高度 使用jquery获取网页中图片的高度其实很简单,有两种常用的方法都可以打到我们的目的 $("img").whith();(返回纯数字) $(&qu ...

  5. es6在网页中模块引入的方法

    前言: 以前,当然包括现在的大部分js引入,我们都是利用<script></script>这种全局的方式进行引入,当然这种弊端还是用的,比如这样直接利用script引入的话,会 ...

  6. WebClient HttpWebRequest从网页中获取请求数据

    WebClient HttpWebRequest //HttpWebRequest webRequest = (HttpWebRequest)WebRequest.Create(urlAddress) ...

  7. prism.js——让网页中的代码更好看

    粗放的代码展示 有时候,网页中会插入代码.直接把代码放入<pre></pre>标签和<code></code>标签里,也算是可以在页面中显示出来. 比如 ...

  8. PluginOK中间件高级版-支持在Chrome、Edge、Firefox等浏览器网页中真正内嵌ActiveX等控件运行的版本已获多家上市公司采购

    PluginOK(牛插)中间件(原名:本网通WebRunLocal)是一个实现WEB浏览器(Web Browser)与本地程序(Local Application)之间进行双向调用的低成本.强兼容.安 ...

  9. CSS font 复合属性的顺序

    CSS 参考手册 实例 在一个声明中设置所有字体属性: p.ex1 { font:italic arial,sans-serif; } p.ex2 { font:italic bold 12px/20 ...

随机推荐

  1. 如何修改file控件

    在移动web开发过程中,常常会用到input file这控件,但css不能修改其样式往往让开发者很头疼,直接把他放到页面上又不美观: 下面介绍的方法,可以将该控件的显示样式替换成一个图标:   该方法 ...

  2. zend studio 9 字体,颜色,快捷键等相关设置

    1.zend studio 9可以破解吗? 可以的,具体破解步骤查看:http://www.geekso.com/ZendStudio9-key/ 2.如何将zend studio 9的默认GBK编码 ...

  3. HDMI之CEC DDC学习笔记(可能有误)

    1 HDMI的音视频通路,有待学习: 2 DDC通路,大致是个IIC接口,读取上游器件的EDID或者E-EDID数据: EDID的前128字节数据格式如下:(可能有不同版本,格式可能有区别)

  4. php知识案列1

    用PHP,在1-20间随机产生5个不重复的值,如何做 复制代码 代码如下: <?php function NoRand($begin=0,$end=20,$limit=5){ $rand_arr ...

  5. 数据库 'MessageManage' 的事务日志已满。若要查明无法重用日志中的空间的原因,请参阅 sys.databases 中的 log_reuse_wait_desc 列。

    提供两种办法:(SQL Server2008) 注意:建议使用第一种方法.第二种方法只是删除已有日志文件,日后还会继续生成. 第一种方法:清空日志. 1.打开企业管理器,直接在查询分析器里执行:(如果 ...

  6. kotlin 练习

    Kotlin 定义函数的一些语法 fun main(args:Array<String>):Unit { val x:() -> Unit = { println("hel ...

  7. 【Python⑤】python序列---list和tuple

    sequence 序列 sequence(序列)是一组有顺序的对象的集合.序列可以包含一个或多个元素,也可以没有任何元素. 我们之前所说的基本数据类型,都可以作为序列的对象.对象还可以是另一个序列.序 ...

  8. 关于Gridview的列名问题

    Gridview的的数据绑定方法有两种: 一种就是datasourceid的绑定在绑定过程当中也可以通过select来选择性的绑定. 二种就是databind(): SqlDataAdapter da ...

  9. ROS语音交互(四)接入图灵语义理解

    首先程序中会用到Json,curl 安装相应的库 $ sudo apt-get install libcurl3 libcurl4-openssl-dev$ sudo apt-get install ...

  10. win环境 yii2 框架 overtrue/wechat 包 由 sys_get_temp_dir 引发的 the directory "c:\Windows" is not writable

    vendor\overtrue\wechat\src\Foundation\Application.php registerBase 方法 在初始化属性时 $this['cache'] = funct ...