zoukankan      html  css  js  c++  java
  • css3--字体

    以前CSS的版本,网页设计师不得不使用用户计算机上已经安装的字体。

    使用CSS3,网页设计师可以使用他/她喜欢的任何字体。

    当你发现您要使用的字体文件时,只需简单的将字体文件包含在网站中,它会自动下载给需要的用户。

    在新的 @font-face 规则中,您必须首先定义字体的名称(比如 myFirstFont),然后指向该字体文件。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>css字体</title>
        <style type="text/css">
         * {
           margin: 0;
           padding: 0;
         } 
         
         @font-face {
           font-family: myFirstFont; /*定义名称*/
           src: url('Sansation_Light.ttf'); /*指向文字文件*/
         }
         
         div {
           font-family: myFirstFont;
         }
         
        </style>
    </head>
    <body>
       <div>使用css3,网站终于可以使用字体以外的预先选择"合法"字体</div>
    </body>
    </html>

    我电脑上下载了这个字体文件

    所以我引用了电脑上提前下载好的字体文件

    (引用路径URL时请使用小写字母的字体,大写字母在IE中会产生意外的结果)

    @font-face {
           font-family: myFirstFont;
           src: url('sansation_light.ttf'); /*引用了小写的字体文件*/
    }

    效果如下:

     我们来对比一下之前没引用字体文件的时候是这样的:

  • 相关阅读:
    Flink中的window、watermark和ProcessFunction(三)
    ThreadLocal刨根问底
    Flink的流处理API(二)
    Flink简介(一)
    SparkStreaming
    SparkSQL
    Spark入门
    SparkCore
    【HNOI2009】 最小圈
    【BOI 2002】 双调路径
  • 原文地址:https://www.cnblogs.com/qjuly/p/9038368.html
Copyright © 2011-2022 走看看