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网页化.期间碰到这么一个问题,页面低栏上的电话 ...
随机推荐
- python3 requests 模块 json参数和data参数区别
json 表示使用application/json方式提交请求 data 使用application/form-urlencode方式提交请求
- CODEVS——T2744 养鱼喂妹纸
http://codevs.cn/problem/2744/ 时间限制: 1 s 空间限制: 64000 KB 题目等级 : 钻石 Diamond 题解 查看运行结果 题目描述 Descr ...
- bitset也挺好用的
http://www.cplusplus.com/reference/bitset/bitset/bitset/ std::bitset<16> foo; std::bitset<4 ...
- PA模块经常使用表
SELECT * FROM pa_projects_all; --项目 SELECT * FROM pa_project_types; --项目类型 SELECT * FROM pa_project_ ...
- Android 上的 制表符（tab） —— 一个奇妙的字符 （二）
接到上回的说,主要是上回那个问题,我认为是android的bug,黎叔认为是cocos2dx的bug,叫我去提交bug.所以我又继续研究了下. 上回说到会调用java层的函数去创建一个image,然后 ...
- 根证书 CA
根证书 CA 密钥没有密码,使用下面的指令添加密码 openssl rsa -aes256 -in cakey_nopw.pem -out cakey_pw.pem cacert.pem -----B ...
- metadata 和 routing
虽然在刚开始源码概述时把代码分为分布式和数据两部分,但是它们的界限并不明显.之前这几篇可以说是这两部分的衔接.我们在快速接近数据(index)部分.本篇分析一下之前分析cluster遗留下的问题:Me ...
- Angular：内置指令
[ngIf]表达式结果为真,显示元素:表达式结果为假,移除元素. <div *ngIf="a > b"></div> [ngSwitch]对表达式进行 ...
- arukas 的 Endpoint
arukas 的 Endpoint 什么是端点 What is Endpoint arukas.io 的实例几乎每周都自动重新启动,当实例重新启动时,其端口会更改.IP地址和端口的平均寿命是一周,有时 ...
- 15.lambda表达式
#include <iostream> #include <array> using namespace std; //解决函数怀孕现象 //[](){} //[] =引用,只 ...