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网页化.期间碰到这么一个问题,页面低栏上的电话 ...
随机推荐
- 在OSG 实现的 oculus rift 效果
在OSG 实现的oculus rift 效果,还不错 这个是Delta3d中实现的 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemh1eWluZ3Fpb ...
- 小白学开发（iOS）OC_ block数据类型（2015-08-08）
// // main.m // block数据类型 // // Created by admin on 15/8/12. // Copyright (c) 2015年 admin. All r ...
- [NowCoder]牛客OI周赛1 题解
A.分组 首先,认识的人不超过3个,因此不存在无解的方案 考虑直接构造,先把所有点设为1,顺序扫一遍把有问题的点加入队列 每次取队头,将其颜色取反,再更新有问题的点 复杂度:考虑到每个点不会操作2次, ...
- vue.js有什么用，是用来做什么的（整理）
vue.js有什么用,是用来做什么的(整理) 一.总结 一句话总结:用数据绑定的思想,vue可以简单写单个页面,也可以写一个大的前端系统,也可以做手机app的界面. 1.Vue.js是什么? 渐进式框 ...
- Java学习笔记二.2
5.运算符:变量的意义就在于可以进行运算,运算需要用运算符来表示,分为以下几种 class test { public static void main(String[] args) { //赋值运算 ...
- STM32 之ADC单次转换模式和连续转换模式
一.背景 在STM32中的AD的单通道采样中可以设置成单次转换模式和连续转换模式,如何理解这两个转换模式的区别,通过程序又是怎样实现的? 二.正文 首先理解单次转换模式,即ADC进行单次转换(单样本) ...
- POJ1308——Is It A Tree?
Is It A Tree? Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 22631 Accepted: 7756 De ...
- 9.Spring Boot实战之配置使用Logback进行日志记录
转自:https://blog.csdn.net/meiliangdeng1990/article/details/54300227 Spring Boot实战之配置使用Logback进行日志记录 在 ...
- Monkey (压力测试)-移动端手机压力测试工具 monkey以及monkeyrunner
4. Monkey (压力测试) 这个是Android提供的系统工具.它向系统发送伪随机的用户事件流(如按键输入.触摸屏输入.手势输入等),实现对正在开发的应用程序进行压力测试.Monkey测试是一种 ...
- 当鼠标聚焦时输入框变色（focus事件实例）
当鼠标聚焦时输入框变色css相关,鼠标点击<input>输入域后出现有颜色的边框原理:css伪类之input输入框鼠标点击边框变色效果伪类元素的使用::focus 一:当输入框获得焦点时, ...