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网页化.期间碰到这么一个问题,页面低栏上的电话 ...
随机推荐
- 【Django】MEDIA的配置及用法
如果需要在数据库中存储图片或视频类的数据,我们可以配置MEDIA. 下面的示例将以上传一张图片的形式来说明MEDIA的配置及用法. 第一步 settings.py # media配置 MEDIA_UR ...
- django shell 操作
插件:django-extensions django-extensions==1.9.8 pip3 install django-extensions 1.数据库shell 命令(项目目录下) p ...
- 新版mysql修改root密码
- ActiveMQ学习总结（3）——spring整合ActiveMQ
1.参考文献 Spring集成ActiveMQ配置 Spring JMS异步发收消息 ActiveMQ 2.环境 在前面的一篇ActiveMQ入门实例中我们实现了消息的异步传送,这篇博文将如何在spr ...
- 浅谈架构之路：单点登录 SSO
前言:SSO 单点登录 "半吊子"的全栈工程师又来了,技术类的文章才发表了两篇,本来想先将主攻的几个系列都开个头(Nodejs.Java.前端.架构.全栈等等),无奈博客起步太晚, ...
- windows删除多余启动引导项
方法1: 按快捷键win+r,打开运行界面,输入msconfig. 点击确定,进入系统配置,选择引导选项卡,如图: 选中你不需要的启动项,点击下面的删除按钮即可.删除完成之后点击确定,重启计算机就可以 ...
- hdu 3294 Girls' research
#include<stdio.h> #include<string.h> #define MAX 200020 char s[MAX],ss[MAX*2],str[2]; in ...
- 计蒜客 429(腾讯手机地图-pi的精确值)
腾讯手机地图的定位功能用到了用户手机的多种信号.这当中有的信号的作用范围近.有的信号作用的范围则远一些.有的信号相对于用户在不同的方位强度是不同的.有的则是在不论什么一个方向上信号强度都一致的. 已知 ...
- php课程 18-60 cookie和session的最主要区别是什么
php课程 18-60 cookie和session的最主要区别是什么 一.总结 一句话总结:存储位置不同:cookie存储在客户端:session存储在服务端. 1.cookie和session在p ...
- php课程 12-40 抽象类的作用是什么
php课程 12-40 抽象类的作用是什么 一.总结 一句话总结:定标准的 1.继承的关键词有哪两个? extendsparent 2.抽象类的实际意义是什么? 制造符合规范的产品你必须实现了抽象类里 ...