在设计布局网页时 经常想要用一些比较好看的字体，比如微软雅黑，这个字体在近年来在网页设计中运用越来越平常， 然而所使用的字体也只有自己能看到 到别的机子上 又恢复了原来的宋体神马的。

经过一位高手的提点，能用CSS直接实现，查阅了部分资料 并经过测试 总结下列方法来实现网页中的自定义字体
我们很容易发现EOT字体仅仅对于IE浏览器支持 面对庞大的ＩＥ用户　ＥＯＴ字体的重要性也就不说了

对于其他浏览器由于直接支持TTF字体 就不多介绍 只是在定义样式时 注意下浏览器的兼容问题就可以了

由于各浏览器对 ‘@font-face’ 规则字体格式支持存在差异，若仅通过定义一个 ‘@font-face’ 规则，可以通过 CSS hack 的方式在IE、Firefox、Chrome、Safari、Opera中得到相同的字体效果：

  1. <style type="text/css">
  2.  
  3. /*定义字体*/
  4. @font-face {
  5. font-family: " your FontName ";
  6. src: url( /location/of/font/FontFileName.eot ); /* IE */
  7. src: local(" real FontName "), url( /location/of/font/FontFileName.ttf ) format("truetype"); /* 非IE */
  8. }
  9. /*调用部分*/
  10. .yourFontName { font-family:" your FontName ", verdana, helvetica, sans-serif; }
  11.  
  12. </style>
  13.  
  14. <body>
  15. <span>微软雅黑显现效果</span>
  16. </body>

解释一下,”your FontName” 为自定义字体名字, “real Fontname”是真实字体名字, 非IE浏览器读到第一行,一看是eot字体,跟自己没关系,于是跳到第二行,读取”local”(本地)定义的字体,试图到用户机器上去找这个字体(所以一定要用真实的字体名字,这样万一用户机子上有该字体就可以省去用户一个ttf的下载),发现没有就从后面的”url”的路径去下载ttf文件了. 而IE过程相反,它读到第一行发现是eot, 但是执行以前他会去继续读后面的行,所以”local”定义非常必要,IE不认识”local”,它就晕了,只好倒回去下载eot,如果没有local定义的话,这段字体定义代码对IE是无效的.

至此跨浏览器的内嵌字体css定义就完成了.

css调用字体 没装微软雅黑，用css写@font-face让其能显示微软雅黑字体的更多相关文章

  1. 微软雅黑 在css里怎么写

    1.首先要了解css中是如何控制字体的. font:在一个声明中设置所有字体属性: font有以下几个属性: font-style:字体样式 font-variant:字体异体 font-weight ...

  2. 在没装VS2010的机器上运行VS2010开发的C++程序

    在VS2010下写了一个win32控制台应用程序,编译ok.exe,需要依赖osg相关动态库 第一次编译的是Debug版本的,直接将ok.exe和osg相关dll文件拷贝到没有安装VS2010机器上运 ...

  3. WPF [调用线程无法访问此对象，因为另一个线程拥有该对象。] 解决方案以及如何实现字体颜色的渐变

    本文说明WPF [调用线程无法访问此对象,因为另一个线程拥有该对象.] 解决方案以及如何实现字体颜色的渐变 先来看看C#中Timer的简单说明,你想必猜到实现需要用到Timer的相关知识了吧. C# ...

  4. Android中调用系统所装的软件打开文件(转)

    Android中调用系统所装的软件打开文件(转) 在应用中如何调用系统所装的软件打开一个文件,这是我们经常碰到的问题,下面是我所用到的一种方法,和大家一起分享一下! 这个是打开文件的一个方法: /** ...

  5. vue打包后js和css、图片不显示，引用的字体找不到问题

    vue打包后js和css.图片不显示,引用的字体找不到问题:图片一般都是背景图片. 一.vue打包出现js和css不显示问题: 1.不使用mode:'history' 2.使用mode:'histor ...

  6. Yii2 assets注册的css样式文件没有加载

    准备引入layui.css文件的,在LayuiAssets类中已经配置了资源属性 <?php namespace frontend\assets; use yii\web\AssetBundle ...

  7. CSS样式----图文详解（二）：css属性

    主要内容 CSS的单位 字体属性 文本属性 背景属性 列表属性 盒子模型 定位属性:position.float.overflow.z-index等 导航栏的制作 鼠标的属性cursor 滤镜的介绍 ...

  8. 利用CSS预处理技术实现项目换肤功能(less css + asp.net mvc4.0 bundle)

    一.背景 在越来越重视用户体验的今天,换肤功能也慢慢被重视起来.一个web系统用户可以选择一个自己喜欢的系统主题,在用户眼里还是会多少加点分的.我们很开心的是easyui v1.3.4有自带defau ...

  9. Font Awesome矢量版，十六进制版，WPF字体使用

    我之前在博客中介绍过几个矢量图库网站,在WPF程序中,一般接触到的矢量图标资源有XAML.SVG.字体这三种格式.XAML是标准格式就不说了,SVG并不是直接支持的,不过微软提供了Expression ...

随机推荐

  1. vuetify使用时遇到的坑：默认颜色显示不了

    原文链接: https://blog.csdn.net/weixin_44015248/article/details/86579777

  2. blind XXE payload

    简单验证 POST /test HTTP/1.1 Content-Type: application/soap+xml User-Agent: scanner Accept: */* Cache-Co ...

  3. [CSS] Change the Alignment of a Single Flexed Item with 'align-self'

    Inside of a flexed container, a single item can control its own flex with align-self. The possible v ...

  4. 验证账号密码是否为空 if格式

    当前台页面是否提示有没有输入账号密码时 这时需要验证 //验证账号是否为空 if(string.IsNullOrEmpty(zh)) { //为空 则提示输入账号 ObjToJsin.msg = &q ...

  5. Oracle Linux 6.4 LVM中误删VG之恢复过程

    一.项目背景描述 1.OSS现网测试数据库因大量小事物频繁提交运行非常缓慢.经分析为DS3950存储所在磁盘I/O存在瓶颈,大量等待事件,性能受限.另外,开发同事没有优化意识,没将小事物做成批量提交方 ...

  6. 「CF375E」Red and Black Tree「树形DP」

    题意 给定一个结点颜色红或黑的树,问最少进行多少次交换黑.红结点使得每个红结点离最近的黑结点距离\(\leq x\). \(1\leq n \leq 500, 1 \leq x \leq 10^9\) ...

  7. CSPS模拟88-91

    感觉自己好菜啊,考得一次不如一次了...压力好大,++滚粗感. 模拟88. T1,sbt,发现离散化后数据范围变为6000,直接跑暴力即可.%%%机房众神斜率优化. T2,大模拟,考场上只会乱搞骗分. ...

  8. C++标准库分析总结(六)——<Map、Multimap、Set、Multiset设计原则>

    关联容器我们可以看做是一个小型的数据库,它就是用key找value,编译器底层对于关联容器的实现有两种:红黑树(Red-Block tree)和哈希表(hash table,散列表). 一.红黑树简单 ...

  9. 分布式锁 ----zookeeper实践 (排它锁)

    排它锁概念: Exclusive Locks,被称为X锁,写锁,独占锁.如果事物T1对数据对象O1加上了排它锁,那么在整个加锁期间,只允许事务T1对O1进行读写操作,其他事务必须等到T1释放锁后才能进 ...

  10. 树莓派安装配置Nginx+PHP7+MariaDB

    原文地址:http://blog.sina.com.cn/s/blog_150f554f50102yhra.html 一.安装 Nginx 和 PHP7 1.安装Nginx sudo apt inst ...