• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • font

    设置或检索对象中的文本字体,是复合属性。

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    浏览器都支持font

    语法:

    font:[[font-style||font-variant||font-weight]?font-size[/line-height]?font-family]
    默认值看独立属性自身
    适用于所有元素
    继承性
    动画性看独立属性自身
    计算值看独立属性自身

    取值:

    说明:

    设置或检索对象中的文本特性。该属性是复合属性。

    • 使用第一种声明方式参数必须按照如上的排列顺序,且font-sizefont-family是不可忽略的。每个参数仅允许有一个值。忽略的将使用其参数对应的独立属性的默认值。
    • 对于如何使用客户端系统没有字体和自定义字体,可以参阅@font-face规则。
    • 对应的脚本特性为font

    如果font字体相关的属性的简写:

    系统关键字

    font:caption | icon | menu | message-box | small-caption | status-bar

    可以将font属性指定为单个关键字,它将选择系统字体,或者作为字体相关的属性的简写。

    如果将font指定为系统关键字,则它必须是以下之一:caption,icon,menu,message-box,small-caption,status-bar

    • caption:使用有标题的系统控件的文本字体(如按钮,菜单等)(CSS2)
    • icon:使用图标标签的字体(CSS2)
    • menu:使用菜单的字体(CSS2)
    • message-box:使用信息对话框的文本字体(CSS2)
    • small-caption:使用小控件的字体(CSS2)
    • status-bar:使用窗口状态栏的字体(CSS2)

    系统关键字前缀

    浏览器经常会多实现几个带前缀的关键字;Gecko 实现了-moz-window,-moz-document,-moz-desktop,-moz-info,-moz-dialog,-moz-button,-moz-pull-down-menu,-moz-list,和-moz-field.

    例子

    /* set the font size to 12px and the line height to 14px.set the font family to sans-serif */
    p { font: 12px/14px sans-serif }
    
    /* set the font size to 80% of the parent elementor default value (if no parent element present).set the font family to sans-serif */
    p { font: 80% sans-serif }
    
    /* set the font weight to bold,the font-style to italic,the font size to large,and the font family to serif. */
    p { font: bold italic large serif }
    
    /* use the same font as the status bar of the window */
    p { font: status-bar }
    

    HTML Content

    <p>change the radio buttons below to see the generated shorthand and it's effect.</p>
    <form action="createshorthand()">
     <div class="cf">
     <div class="setpropcont">
     font-style<br/>
     <input type="radio" id="font-style-none" name="font_style" checked="" value="" onchange="setcss()"> <label for="font-style-none">none</label><br/>
     <input type="radio" id="font-style-normal" name="font_style" value="normal" onchange="setcss()"> <label for="font-style-normal">normal</label><br/>
     <input type="radio" id="font-style-italic" name="font_style" value="italic" onchange="setcss()"> <label for="font-style-italic">italic</label><br/>
     <input type="radio" id="font-style-oblique" name="font_style" value="oblique" onchange="setcss()"> <label for="font-style-oblique">oblique</label>
     </div>
     
     <div class="setpropcont">
     font-variant<br>
     <input type="radio"id="font-variant-none" name="font_variant" checked="" value=" " onchange="setcss()"> <label for="font-variant-none">none</label><br/>
     <input type="radio"id="font-variant-normal" name="font_variant" value="normal" onchange="setcss()"> <label for="font-variant-normal">normal</label><br/>
     <input type="radio" id="font-variant-small-caps" name="font_variant" value="small-caps" onchange="setcss()"> <label for="font-variant-small-caps">small-caps</label>
     </div>
     
     <div class="setpropcont">
     font-weight<br/>
     <input type="radio"id="font-weight-none" name="font_weight" value="" onchange="setcss()"> <label for="font-weight-none">none</label><br/>
     <input type="radio"id="font-weight-normal" checked="" name="font_weight" value="400" onchange="setcss()"> <label for="font-weight-normal">normal</label><br/>
     <input type="radio"id="font-weight-bold" name="font_weight" value="700" onchange="setcss()"> <label for="font-weight-bold">bold</label>
     </div>
     
     <div class="setpropcont">
     font-size<br/>
     <input type="radio"id="font-size-12px" name="font_size" value="12px" onchange="setcss()"> <label for="font-size-12px">12px</label><br/>
     <input type="radio"id="font-size-16px" name="font_size" value="16px" checked="" onchange="setcss()"> <label for="font-size-16px">16px</label><br/>
     <input type="radio"id="font-size-24px" name="font_size" value="24px" onchange="setcss()"> <label for="font-size-24px">24px</label>
     </div>
     
     <div class="setpropcont">
     line-height<br/>
     <input type="radio" id="line-height-none" name="line_height" checked="" value="" onchange="setcss()"> <label for="line-height-none">none</label><br/>
     <input type="radio"id="line-height-1.2" name="line_height" value="/1.2" onchange="setcss()"> <label for="line-height-1.2">1.2</label><br/>
     <input type="radio"id="line-height-3" name="line_height" value="/3" onchange="setcss()"> <label for="line-height-3">3</label>
     </div>
     
     <div class="setpropcont">
     font-family<br/>
     <input type="radio"id="font-family-courier" name="font_family" checked="" value="courier" onchange="setcss(5,'courier')"> <labelfor="font-family-courier">courier</label><br/>
     <input type="radio"id="font-family-serif" name="font_family" value="serif" onchange="setcss()"> <label for="font-family-serif">serif</label><br/>
     <input type="radio"id="font-family-sans-serif" name="font_family" value="sans-serif" onchange="setcss()"> <label for="font-family-sans-serif">sans-serif</label>
     </div>
     </div>
    
     <div class="cf propinputs">
     <div class="propinputcont tar">
     font :
     </div>
     <div class="propinputcont">
     <input type="text" class="curcss" id="input_font_style"><br/>
     font-style <br/>
     optional
     
     </div>
     <div class="propinputcont">
     <input type="text" class="curcss" id="input_font_variant"> <br/>
     font-variant <br/>
     optional
     </div>
     <div class="propinputcont">
     <input type="text" class="curcss" id="input_font_weight"> <br/>
     font-weight <br/>
     optional
     </div>
     <div class="propinputcont">
     <input type="text" class="curcss mandatory" id="input_font_size"> <br/>
     font-size <br/>
     mandatory
     </div>
     <div class="propinputcont">
     <input type="text" class="curcss" id="input_line_height"> <br/>
     line-height <br/>
     optional
     </div>
     <div class="propinputcont">
     <input type="text" class="curcss mandatory" id="input_font_family"> <br/>
     font-family <br/>
     mandatory
     </div>
     </div>
    </form>
    
    <div class="fontshorthand">
     this is some sample text.
    </div>
    

    CSS Content

    body, input {
      font: 14px arial;
    }
    
    .propinputcont {
     float: left;
     text-align: center;
     margin-right: 5px;
     width: 80px;
    }
    
    .setpropcont {
     float: left;
     margin-right: 5px;
     width: 120px;
    }
    
    .propinputs, .setpropcont {
     margin-bottom: 1em;
    }
    
    .curcss {
     border: none;
     border-bottom: 1px solid black;
     text-align: center;
     width: 80px;
    }
    
    .mandatory {
     border-bottom-color: red;
    }
    
    .cf:before,
    .cf:after {
     content: " ";
     display: table;
    }
    
    .cf:after {
     clear: both;
    }
    
    .tar {
      width: 40px;
      text-align: right;
    }
    

    JavaScript Content

    var textareas = document.getelementsbyclassname("curcss"),
     shorttext = "",
     getcheckedvalue,
     setcss,
     getproperties,
     injectcss;
    
    getproperties = function () {
     shorttext =
       getcheckedvalue("font_style") + " " +
     getcheckedvalue("font_variant") + " " +
     getcheckedvalue("font_weight") + " " +
     getcheckedvalue("font_size") +
     getcheckedvalue("line_height") + " " +
     getcheckedvalue("font_family");
    
     return shorttext;
    }
    
    getcheckedvalue = function(radio_name) {
     oradio = document.forms[0].elements[radio_name];
     for (var i = 0; i < oradio.length; i++) {
     if(oradio[i].checked) {
     var propinput = "input_" + radio_name,
      curelemname = "input_" + radio_name,
         curelem = document.getelementbyid(curelemname);
     curelem.value = oradio[i].value;
    
      return oradio[i].value;
     }
     }
    }
    
    setcss = function () {
     getproperties();
     injectcss(shorttext);
    }
    
    injectcss = function(cssfragment) {
     old = document.body.getelementsbytagname("style");
     if (old.length > 1) {
     old[1].parentelement.removechild(old[1]);
     }
     css = document.createelement("style");
     css.innerhtml = ".fontshorthand{font: " + cssfragment + "}
    ";
     document.body.appendchild(css);
    }
    
    setcss();
    

    下篇:font-kerning