css3-11 网页如何使用自定义字体
css3-11 网页如何使用自定义字体
一、总结
一句话总结：下载好字体文件，然后在网页中引入，用src: url('my.otf');来引入，使用的时候就使用自己定义的名字来使用这个字体。
1、网页如何使用自定义字体？
下载好字体文件，然后在网页中引入，用src: url('my.otf');来引入，使用的时候就使用自己定义的名字来使用这个字体。
声明
7 @font-face
8 {
9 font-family: my;
10 src: url('my.otf');
11 }
使用
13 *{
14 font-family: my;
15 }
2、声明网页使用字体文件在哪里声明，声明的关键词是什么？
在style里面
@font-face
3、声明字体为了解决什么问题？
网页中的字体用户电脑没有，服务器上也没有的问题
现在只要网站有就可以啦
4、如何使用声明的字体？
声明字体的时候会指定名字，用的时候直接使用这个名字就可以了
7 @font-face
8 {
9 font-family: my;
10 src: url('my.otf');
11 }
12
13 *{
14 font-family: my;
15 }
二、网页如何使用自定义字体
1、相关知识
@font-face
{
font-family: fzm;
src: url('fzm.ttf');
}
2、代码
自定义字体类型
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
@font-face
{
font-family: my;
src: url('my.otf');
} *{
font-family: my;
} div{
width:500px;
height:300px;
} </style>
</head>
<body>
<div>
<p>我是小金，我爱睡觉!</p>
<p>linux is very much!</p>
<p>linux is very much!</p>
<p>linux is very much!</p>
<p>linux is very much!</p>
</div>
</body>
</html>
css3-11 网页如何使用自定义字体的更多相关文章
- css3 自定义字体的使用方法
@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许 ...
- CSS3的自定义字体@font-face:将图片ICON转为字体
大家都知道现在各个浏览器都支持CSS3的自定义字体(@font-face),包括IE6都支持,只是各自对字体文件格式的支持不太一样.那么对于网站中用到的各种icon,我们就可以尝试使用font来实现, ...
- css3 自定义字体_使用@font-face方式实现个性化字体
当我们在浏览一些网站时发现,里面含有一些十分个性的字体,这些字体并不是我们电脑上安装的字体.那么css是如何实现自定义字体的呢? 资源网站大全https://55wd.com 在css3中可以通过@f ...
- CSS3 使用自定义字体
CSS3 @font-face 规则 在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体.通过 CSS3,web 设计师可以使用他们喜欢的任意字体.当您您找到或购买到希望使用的字体 ...
- css3之自定义字体
使用@font-face自定义字体 我们在浏览国外的一些个人网站时,总是可以发现一些非常个性的字体,比如
- css3中的自定义字体
自定义字体 /*定义*/ @font-face { font-family: "icons"; src: url("icomoon.eot"); src: lo ...
- 在前端页面中使用@font-face来显示web自定义字体【转】
本文转自W3CPLUS 的<CSS @font-face> @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现, ...
- 01_MUI之Boilerplate中：HTML5示例，动态组件，自定义字体示例，自定义字体示例，图标字体示例
1安装HBuilder5.0.0,安装后的界面截图如下: 2 按照https://www.muicss.com/docs/v1/css-js/boilerplate-html中的说明,创建上图的 ...
- fontforge制作自定义字体及在手机上应用举例——张鑫旭
一.看似无关紧要的事件背景 之所以花时间折腾fontforge这个软件,去制作什么自定义的字体是有原因滴. 之前提过,最近我抽空将公司的手机软件HTML5网页化.期间碰到这么一个问题,页面低栏上的电话 ...
随机推荐
- mycat 不得不说的缘分（转）
,尾声,左兄与任正非.leader-us与马云 新成立的公司里面,有个左兄,很传奇,大一在大学入伍,然后复员专业,来上海学IT,年纪轻轻,睡在地铁站,苦心专研数据库.系统.中间件,现在已经成为了业界大 ...
- 注意string的insert函数的几种形式
string (1) string& insert (size_t pos, const string& str); substring (2) string& insert ...
- mac下的词典翻译快捷键
mac下的词典翻译快捷键:cmd+ctl+d;很方便
- Autodesk 招聘Revit二次开发咨询顾问，与Autodesk全球团队紧密合作，提高职业生涯的好机会
朋友们, 因为我离开Autodesk的全职工作(变为部分时间工作),我的职位空出.急招这个职位.请踊跃把你周围的朋友推荐给Autodesk. 请将简历发给我转交给Autodesk 我的邮箱yexion ...
- MySQL轻量版使用，无需安装，无脑操作
不知道是否有想我一样的,开始用的都是安装版的,特别费事,卸载后注册表很难删除 下面介绍一下MySQL轻量级的如下 首先打开一个网址:www.oracle.com没错就是强大的Oracle官网 也可以直 ...
- BZOJ5137: [Usaco2017 Dec]Standing Out from the Herd(广义后缀自动机，Parent树)
Description Just like humans, cows often appreciate feeling they are unique in some way. Since Farme ...
- STM32之CAN通讯接收过滤器过滤分析
一.前言 学习了CAN通讯,底层的东东CAN控制器已经帮你处理完成,也就是CAN通讯协议已经做好,你按协议格式往对应的位扔数据发送就好,所以使用CAN通讯,我们只需要去关心制定发送的数据间的协议,也就 ...
- 【2017"百度之星"程序设计大赛 - 复赛】Arithmetic of Bomb
[链接]http://bestcoder.hdu.edu.cn/contests/contest_showproblem.php?cid=777&pid=1001 [题意] 在这里写 [题解] ...
- arcgis webapp builder 安装试用
ArcGIS WebApp Builder 是针对开发者的,用于高速构建基于HTML5/Javascript 技术的美观的 Web应用的一个工具. 用过Flex版本号的AppBuilder应该非常清楚 ...
- CSS笔记--选择器
CSS笔记--选择器 mate的使用 <meta charset="UTF-8"> <title>Document</title> <me ...