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 网页如何使用自定义字体的更多相关文章

  1. css3 自定义字体的使用方法

    @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许 ...

  2. CSS3的自定义字体@font-face:将图片ICON转为字体

    大家都知道现在各个浏览器都支持CSS3的自定义字体(@font-face),包括IE6都支持,只是各自对字体文件格式的支持不太一样.那么对于网站中用到的各种icon,我们就可以尝试使用font来实现, ...

  3. css3 自定义字体_使用@font-face方式实现个性化字体

    当我们在浏览一些网站时发现,里面含有一些十分个性的字体,这些字体并不是我们电脑上安装的字体.那么css是如何实现自定义字体的呢? 资源网站大全https://55wd.com 在css3中可以通过@f ...

  4. CSS3 使用自定义字体

    CSS3 @font-face 规则 在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体.通过 CSS3,web 设计师可以使用他们喜欢的任意字体.当您您找到或购买到希望使用的字体 ...

  5. css3之自定义字体

    使用@font-face自定义字体 我们在浏览国外的一些个人网站时,总是可以发现一些非常个性的字体,比如

  6. css3中的自定义字体

    自定义字体 /*定义*/ @font-face { font-family: "icons"; src: url("icomoon.eot"); src: lo ...

  7. 在前端页面中使用@font-face来显示web自定义字体【转】

    本文转自W3CPLUS 的<CSS @font-face> @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现, ...

  8. 01_MUI之Boilerplate中：HTML5示例，动态组件，自定义字体示例，自定义字体示例，图标字体示例

     1安装HBuilder5.0.0,安装后的界面截图如下: 2 按照https://www.muicss.com/docs/v1/css-js/boilerplate-html中的说明,创建上图的 ...

  9. fontforge制作自定义字体及在手机上应用举例——张鑫旭

    一.看似无关紧要的事件背景 之所以花时间折腾fontforge这个软件,去制作什么自定义的字体是有原因滴. 之前提过,最近我抽空将公司的手机软件HTML5网页化.期间碰到这么一个问题,页面低栏上的电话 ...

随机推荐

  1. Myeclipse学习总结（2）——MyEclipse快捷键大全

    1.ctrl+shift+R 打开资源 此组快捷键可以打开工程中任意一个文件,而本人只需按文件名或者mask名的字母顺序输入就会出现对应的文件或者在内容中某个关键字再按快捷键也可以的,例如:Custo ...

  2. [React] Create a queue of Ajax requests with redux-observable and group the results.

    With redux-observable, we have the power of RxJS at our disposal - this means tasks that would other ...

  3. Extjs, 使用GridPanel出现 Layout run failed

    当GridPanel被加入到容器,且容器的layout为vbox时候, 会出现 Layout run failed 后者GridPanel的尺寸没有撑满父容器 网上找到的解决的方法是.要给父容器设置一 ...

  4. [NOI.AC#35]string 缩点+拓扑排序

    链接 因为有交换相邻字母,因此给你字符串就相当于给你了这个字符串的所有排列 把等价的串映射到整数范围,再根据 \(m\) 种魔法连边,缩点后在 DAG 上DP即可 无耻地用了int128 #inclu ...

  5. Maven中央仓库信息速查

    http://maven.outofmemory.cn/

  6. httpurlconnection发送文件到服务端并接收

    httpurlconnection发送文件到服务端并接收 客户端 import java.io.DataInputStream; import java.io.File; import java.io ...

  7. BZOJ2780: [Spoj]8093 Sevenk Love Oimaster（广义后缀自动机，Parent树，Dfs序）

    Description Oimaster and sevenk love each other. But recently,sevenk heard that a girl named ChuYuXu ...

  8. Mybatis批量插入，是否能够返回id列表

    第1次代码 void batchAdd(List<Photo> list); <insert id="batchAdd" parameterType=" ...

  9. oracle 日期

    http://blog.itpub.net/126211/viewspace-712986/

  10. hdu4605Magic Ball Game 树状数组

    //给一棵树.树的每个节点的子节点个数是0或2 //对于每个节点都有一个权值w[i] //一个权值为x的球在每个节点的情况有 //x=w[i] 这个球在该点不向下掉 //x<w[i] 这个球往左 ...