• 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>
     
  • 相关阅读:
    省市区(简版)
    利用 NSSortDescriptor 对 NSMutableArray 排序
    Objective-C 高性能的循环遍历 forin
    iOS-内存管理
    ios-遍历和排序
    寒假 OC-代理,类目,内存,协议,延展,数组,字典,集合
    Oracle SQL篇(二)oracle自连接操作
    Oracle SQL篇(三)Oracle ROWNUM 与TOP N分析
    Oracle SQL篇(四)group by 分组与分组的加强 rollup
    ODI中删除数据的处理
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/9262853.html
Copyright © 2020-2023  润新知