zoukankan      html  css  js  c++  java
  • 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、代码

    自定义字体类型

     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>
     
  • 相关阅读:
    URL 编码通用引用
    [转]Asp.Net 301重定向的实现(SEO友好,有利于PR值)
    js重载图片
    Asp.net MVC学习
    SEO分析的七个切入角度
    [C#] 注入DLL
    [C] 伽马函数计算(可求小数)
    [C++] DLL远程注入实例
    [JS] 玩转微软Bing地图
    [C#(WebForm)] (开源)仿VS.NET的在线网页编辑器(Lesktop开源控件库)
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/9262853.html
Copyright © 2011-2022 走看看