CSS3自定义字体
原文摘自:https://www.cnblogs.com/moqiutao/archive/2015/12/23/5070463.html
总节:
1) 定义字体标准格式:
@font-face {
font-family: 'YourWebFontName';
src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
url('YourWebFontName.ttf') format('truetype'), /* Safari, Android, iOS */
url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */ [font-weight: <weight>];
[font-style: <style>];
}
YourWebFontName : 字体名称
url('YourWebFontName.eot') 字体在服务器上的相对路径或绝对路径
要求尽可能的上传ttf、eot、woff、svg字体,并显示表明相应格式,比如: format('embedded-opentype')
还可以字体字体描述,比如是否是粗体: font-weight 等,但不是必须的。
2)字体转换网址:
https://www.fontke.com/tool/convfont/
3)演示代码:
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style>
/* 定义 卡布奇诺美瞳简体 */
@font-face {
font-family: "卡布奇诺美瞳简体";
src: url("锐字工房卡布奇诺美瞳简1.0.eot"); /* IE9 Compat Modes */
src: url("锐字工房卡布奇诺美瞳简1.0.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("锐字工房卡布奇诺美瞳简1.0.woff") format("woff"), /* Modern Browsers */
url("锐字工房卡布奇诺美瞳简1.0.ttf") format("truetype"), /* Safari, Android, iOS */
url("锐字工房卡布奇诺美瞳简1.0.svg#YourWebFontName") format("svg"); /* Legacy iOS */
} /* 应用字体 */
div {
font-family: "卡布奇诺美瞳简体", "Arial Black", Gadget, sans-serif;
font-size:40px; /* 字体太小,使其变大*/
font-weight:bold;
color:#06C;
}
</style>
</head> <body>
<div class="tip">Hello World!</div>
</body>
</html>
演示网址:http://www.wangshen.net/learn/css3/demo/font-face/ ,第一次打开有点慢,因为中文字体库一般都比较大。
演示下载:http://www.wangshen.net/learn/css3/demo/font-face/font-face.rar
CSS3自定义字体的更多相关文章
- css3 自定义字体的使用方法
@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许 ...
- css3 自定义字体_使用@font-face方式实现个性化字体
当我们在浏览一些网站时发现,里面含有一些十分个性的字体,这些字体并不是我们电脑上安装的字体.那么css是如何实现自定义字体的呢? 资源网站大全https://55wd.com 在css3中可以通过@f ...
- css3 自定义字体 @font-face
CSS3 @font-face 规则 在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体. 通过 CSS3,web 设计师可以使用他们喜欢的任意字体. 当您您找到或购买到希望使用的 ...
- CSS学习笔记----CSS3自定义字体图标
响应式网页字体图标 作者:大漠 日期:2014-01-28 点击:3220 @font-face Responsive 本文由大漠根据Jason的<Responsive Webfont Icon ...
- CSS3 使用自定义字体
CSS3 @font-face 规则 在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体.通过 CSS3,web 设计师可以使用他们喜欢的任意字体.当您您找到或购买到希望使用的字体 ...
- css3之自定义字体
使用@font-face自定义字体 我们在浏览国外的一些个人网站时,总是可以发现一些非常个性的字体,比如
- CSS3的自定义字体@font-face:将图片ICON转为字体
大家都知道现在各个浏览器都支持CSS3的自定义字体(@font-face),包括IE6都支持,只是各自对字体文件格式的支持不太一样.那么对于网站中用到的各种icon,我们就可以尝试使用font来实现, ...
- css3中的自定义字体
自定义字体 /*定义*/ @font-face { font-family: "icons"; src: url("icomoon.eot"); src: lo ...
- 使用自定义字体 @font-face 小试
第一次了解到@font-face是小伙伴给我展示的功能 感觉奇妙的不得了 @font-face 是CSS3中的一个模块 使用它你就可以将你自定义的web字体 去实现一些奇妙的想法 首先先介绍 ...
随机推荐
- [转]:理解 Linux 配置文件
简介: 本文说明了 Linux 系统的配置文件,在多用户.多任务环境中,配置文件控制用户权限.系统应用程序.守护进程.服务和其它管理任务.这些任务包括管理用户帐号.分配磁盘配 额.管理电子邮件和新闻组 ...
- bootstrap-table页码ALL显示为NAN
在github上查阅找到的解决办法: https://github.com/wenzhixin/bootstrap-table/issues/435 页面部分: data-page-list=&quo ...
- react系列(六)Redux Saga
在Redux中常要管理异步操作,目前社区流行的有Redux-Saga.Redux-thunk等.在管理复杂应用时,推荐使用Redux-Saga,它提供了用 generator 书写类同步代码的能力. ...
- UIView常用的一些方法setNeedsDisplay和setNeedsLayout
1,UIView的setNeedsDisplay和setNeedsLayout方法 首先两个方法都是异步执行的.而setNeedsDisplay会调用自动调用drawRect方法,这样可以拿到 UI ...
- mysql小特性:change buffer
change buffer是在其他数据库中没有的一个概念,说白了就是一块系统表空间分配的空间,针对的对象是辅助索引的叶子节点(为什么不是主键索引?因为主键索引是聚集索引,在磁盘上的排列是有序的,磁盘的 ...
- window.moveTo(),window.moveBy()不生效
window.moveTo()和window.moveBy的菜鸟教程介绍: moveTo() 方法可把窗口的左上角移动到一个指定的坐标. window.moveTo(x,y) moveBy() 方法可 ...
- 记一次PHP实现接收邮件信息(我这里测试的腾讯企业邮件)
PHP实现接收邮件信息(我这里测试的腾讯企业邮件) , 其他的类型的没有测,应该只要更换pop3地址 端口号就可以. 代码如下(代码参考网络分享): <?php //此处查看链接状态 heade ...
- kali aquatone安装
https://www.jianshu.com/p/418eedb9d9c8
- python爬xx图代码
今日 好热,照样是挖洞挖不到,看了几天的python爬虫,学会了xpath解析 撸一个代码玩玩] 不要说什么,优化之类的,刚学完,跑了一阵 ,还可以 挺稳定 # -*- coding:utf-8 - ...
- Go语言中的流程控制
1 概述 Go语言提供了条件分支 if,状态分支 switch,循环 for,跳转 goto,延迟执行 defer,这些流程控制语句.分别作说明如下: 2 条件分支 if 依据条件是否满足确定执行哪个 ...