css3-11 网页如何使用自定义字体

一、总结

一句话总结：下载好字体文件，然后在网页中引入，用src: url('my.otf');来引入，使用的时候就使用自己定义的名字来使用这个字体。

1、网页如何使用自定义字体？

下载好字体文件，然后在网页中引入，用src: url('my.otf');来引入，使用的时候就使用自己定义的名字来使用这个字体。

声明

  1.  7         @font-face
  2.  8         {
  3.  9             font-family: my;
  4. 10             src: url('my.otf');
  5. 11         }

使用

  1. 13         *{
  2. 14             font-family: my;
  3. 15         }

2、声明网页使用字体文件在哪里声明，声明的关键词是什么？

在style里面

  1. @font-face

3、声明字体为了解决什么问题？

网页中的字体用户电脑没有，服务器上也没有的问题

现在只要网站有就可以啦

4、如何使用声明的字体？

声明字体的时候会指定名字，用的时候直接使用这个名字就可以了

  1.  7         @font-face
  2.  8         {
  3.  9             font-family: my;
  4. 10             src: url('my.otf');
  5. 11         }
  6. 12
  7. 13         *{
  8. 14             font-family: my;
  9. 15         }

二、网页如何使用自定义字体

1、相关知识

字体样式:
@font-face
{
    font-family: fzm;
    src: url('fzm.ttf');
}

2、代码

自定义字体类型

  1.  <!doctype html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>index</title>
  6.      <style>
  7.          @font-face
  8.          {
  9.              font-family: my;
  10.              src: url('my.otf');
  11.          }
  12.  
  13.          *{
  14.              font-family: my;
  15.          }
  16.  
  17.          div{
  18.              width:500px;
  19.              height:300px;
  20.          }    
  21.  
  22.      </style>
  23.  </head>
  24.  <body>
  25.      <div>
  26.          <p>我是小金，我爱睡觉!</p>
  27.          <p>linux is very much!</p>
  28.          <p>linux is very much!</p>
  29.          <p>linux is very much!</p>
  30.          <p>linux is very much!</p>
  31.      </div>
  32.  </body>
  33.  </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. axel---下载工具

    axel是Linux下一个不错的HTTP/ftp高速下载工具.支持多线程下载.断点续传,且可以从多个地址或者从一个地址的多个连接来下载同一个文件.适合网速不给力时多线程下载提高下载速度.比如在国内VP ...

  2. 今日SGU 5.8

    SGU 109 题意:一个n*n的矩形,起点在1,1然后每次给你一个操作,走ki步,然后你可以删除任意一个点这次步走不到的,删了就不能再走了,然后问构造这种操作,使得最后删除n*n-1个点 剩下一个点 ...

  3. wordpress+wampserver

    听说过wordpress和joomla这样的简单建站的工具,尽管是PHP,可是看过同事搭建的公司站点.效果真心不错.于是手痒痒尝试一下.由于是搭着玩儿.所以用wordpress+wampserver( ...

  4. 47.Android 自己定义PopupWindow技巧

    47.Android 自己定义PopupWindow技巧 Android 自己定义PopupWindow技巧 前言 PopupWindow的宽高 PopupWindow定位在下左位置 PopupWin ...

  5. malloc,colloc,realloc内存分配，动态库，静态库的生成与调用

     1.在main方法里面直接定义一个很大的数组的时候.可能会出现栈溢出:错误代码演示: #include<stdio.h> #include<stdlib.h> void ...

  6. IIS特殊字符设置

    简介:[iis7]请求筛选模块被配置为拒绝包含双重转义序列的请求.HTTP 错误 404.11 - Not Found 特殊字符最好替换成其他的字符,主要的特殊字符有”*”.”&”.”%”.” ...

  7. Windows/Linux下磁盘使用的图形化工具简介

    Windows/Linux下磁盘使用的图形化工具简介   如何以图形界面查看磁盘及分区的大小及剩余容量呢?今天我为大家介绍两款Windows/Linux下磁盘使用的图形化工具分别是Spacesniff ...

  8. 界面实例--旋转的3d立方体

    好吧,这里直接编辑源码并不允许设置css和js……毕竟会有危险……那直接放代码吧 <!DOCTYPE html> <html> <head> <meta ch ...

  9. 前端上传文件 后端PHP获取文件

    <body> <form action="03-post-file.php" method="post" enctype="mult ...

  10. C#之菜单控件、主窗体打开子窗体、GroupBox控件使用

    一.背景 一年前有学习过C#,但没有在项目中去实际做APP,重新捡起来应用到项目中.我同事本来做好一个CANOPEN设备管理的界面,由于近期搜索了别人的开发的界面,我觉得有很多东西要重新安排,以及我已 ...