css调用字体 没装微软雅黑，用css写@font-face让其能显示微软雅黑字体
在设计布局网页时 经常想要用一些比较好看的字体，比如微软雅黑，这个字体在近年来在网页设计中运用越来越平常， 然而所使用的字体也只有自己能看到 到别的机子上 又恢复了原来的宋体神马的。
经过一位高手的提点，能用CSS直接实现，查阅了部分资料 并经过测试 总结下列方法来实现网页中的自定义字体
我们很容易发现EOT字体仅仅对于IE浏览器支持 面对庞大的ＩＥ用户 ＥＯＴ字体的重要性也就不说了
对于其他浏览器由于直接支持TTF字体 就不多介绍 只是在定义样式时 注意下浏览器的兼容问题就可以了
由于各浏览器对 ‘@font-face’ 规则字体格式支持存在差异，若仅通过定义一个 ‘@font-face’ 规则，可以通过 CSS hack 的方式在IE、Firefox、Chrome、Safari、Opera中得到相同的字体效果：
<style type="text/css"> /*定义字体*/
@font-face {
font-family: " your FontName ";
src: url( /location/of/font/FontFileName.eot ); /* IE */
src: local(" real FontName "), url( /location/of/font/FontFileName.ttf ) format("truetype"); /* 非IE */
}
/*调用部分*/
.yourFontName { font-family:" your FontName ", verdana, helvetica, sans-serif; } </style> <body>
<span>微软雅黑显现效果</span>
</body>
解释一下,”your FontName” 为自定义字体名字, “real Fontname”是真实字体名字, 非IE浏览器读到第一行,一看是eot字体,跟自己没关系,于是跳到第二行,读取”local”(本地)定义的字体,试图到用户机器上去找这个字体(所以一定要用真实的字体名字,这样万一用户机子上有该字体就可以省去用户一个ttf的下载),发现没有就从后面的”url”的路径去下载ttf文件了. 而IE过程相反,它读到第一行发现是eot, 但是执行以前他会去继续读后面的行,所以”local”定义非常必要,IE不认识”local”,它就晕了,只好倒回去下载eot,如果没有local定义的话,这段字体定义代码对IE是无效的.
至此跨浏览器的内嵌字体css定义就完成了.
css调用字体 没装微软雅黑，用css写@font-face让其能显示微软雅黑字体的更多相关文章
- 微软雅黑 在css里怎么写
1.首先要了解css中是如何控制字体的. font:在一个声明中设置所有字体属性: font有以下几个属性: font-style:字体样式 font-variant:字体异体 font-weight ...
- 在没装VS2010的机器上运行VS2010开发的C++程序
在VS2010下写了一个win32控制台应用程序,编译ok.exe,需要依赖osg相关动态库 第一次编译的是Debug版本的,直接将ok.exe和osg相关dll文件拷贝到没有安装VS2010机器上运 ...
- WPF [调用线程无法访问此对象，因为另一个线程拥有该对象。] 解决方案以及如何实现字体颜色的渐变
本文说明WPF [调用线程无法访问此对象,因为另一个线程拥有该对象.] 解决方案以及如何实现字体颜色的渐变 先来看看C#中Timer的简单说明,你想必猜到实现需要用到Timer的相关知识了吧. C# ...
- Android中调用系统所装的软件打开文件(转)
Android中调用系统所装的软件打开文件(转) 在应用中如何调用系统所装的软件打开一个文件,这是我们经常碰到的问题,下面是我所用到的一种方法,和大家一起分享一下! 这个是打开文件的一个方法: /** ...
- vue打包后js和css、图片不显示，引用的字体找不到问题
vue打包后js和css.图片不显示,引用的字体找不到问题:图片一般都是背景图片. 一.vue打包出现js和css不显示问题: 1.不使用mode:'history' 2.使用mode:'histor ...
- Yii2 assets注册的css样式文件没有加载
准备引入layui.css文件的,在LayuiAssets类中已经配置了资源属性 <?php namespace frontend\assets; use yii\web\AssetBundle ...
- CSS样式----图文详解（二）：css属性
主要内容 CSS的单位 字体属性 文本属性 背景属性 列表属性 盒子模型 定位属性:position.float.overflow.z-index等 导航栏的制作 鼠标的属性cursor 滤镜的介绍 ...
- 利用CSS预处理技术实现项目换肤功能(less css + asp.net mvc4.0 bundle)
一.背景 在越来越重视用户体验的今天,换肤功能也慢慢被重视起来.一个web系统用户可以选择一个自己喜欢的系统主题,在用户眼里还是会多少加点分的.我们很开心的是easyui v1.3.4有自带defau ...
- Font Awesome矢量版，十六进制版，WPF字体使用
我之前在博客中介绍过几个矢量图库网站,在WPF程序中,一般接触到的矢量图标资源有XAML.SVG.字体这三种格式.XAML是标准格式就不说了,SVG并不是直接支持的,不过微软提供了Expression ...
随机推荐
- CentOS7.x安装nodejs-10.16.3
Wiki.js 安装 需要用到nodejs,本文介绍下快速安装nodejs 环境: 操作系统:CentOS7.6 nodejs版本:10.16.3 官网:https://nodejs.org/en/ ...
- redis--基于内存的高速缓存，NoSql的典型代表
NoSql入门和概述 入门概述 为什么要使用NoSql? 1.单机mysql的美好年代 在早些年以前,那时候网站的访问量不大,用单个数据库完全可以应付.而且那个时候,绝大部分都是LAMP架构:Linu ...
- 判断大文件是否上传成功（一个大文件上传到ftp,判断是否上传完成）
大文件上传ftp,不知道有没有上传完成,如果没有上传完成另一个程序去下载这个文件,导致下载不完整. 判断一个文件是否上传完成的方法: /** * 间隔一段时间去计算文件的长度来判断文件是否写入完成 * ...
- 洛谷 P3955 图书管理员 题解
每日一题 day12 打卡 Analysis 模拟+快速幂 先把图书的编码存起来排序,保证第一个找到的就是最小的.如果要求一个数后x位,就将这个数模10的x次方,同理,我们可以通过这个规律来判断后缀. ...
- Oracle语句中IN和=的区别有哪些？
Oracle语句中IN和=的区别有: 1.首先应用范围不一样:in 可以理解为是范围内的选择:= 只有一个.例如: select sno, sname from t1 where sno in ('s ...
- bzoj 2111: [ZJOI2010]Perm 排列计数 Lucas
题意:称一个1,2,...,N的排列P1,P2...,Pn是Magic的,当且仅当2<=i<=N时,Pi>Pi/2. 计算1,2,...N的排列中有多少是Magic的,答案可能很大, ...
- Jetbrain全栈最新激活方法（2019年及之前所有新老版本）
随着2019版的到来,之前的永久激活教程也不生效了,所以今天为大家带来一种新的永久激活方式. 1.下载新版破解补丁 破解补丁传送门提取码:3e8j 点击传送门下载补丁文件 jetbrains-agen ...
- 比Excel还简单的SQL语句查询
大家好,我是jacky朱元禄,很高兴继续跟大家分享<MySQL数据分析实战>系列课程,前面的课程jacky分享了数据层面增删改查中的增删改,下面的课程我们要说增删改查的这个查,jacky说 ...
- 【java8新特性】日期和时间
Java 8 (又称为 jdk 1.8) 是 Java 语言开发的一个主要版本. Oracle 公司于 2014 年 3 月 18 日发布 Java 8 ,它支持函数式编程,新的 JavaScript ...
- java设计模式学习-单例模式
java中单例模式定义:“一个类有且仅有一个实例,并且自行实例化向整个系统提供.”单例模式可以保证一个应用中有且只有一个实例,避免了资源的浪费和多个实例多次调用导致出错. 单例模式有以下特点: 1.单 ...