Table des matières
实例
浏览器支持
定义和用法
说明
可能的值
TIY 实例
相关页面
Maison interface Web tutoriel HTML CSS font 复合属性的顺序_html/css_WEB-ITnose

CSS font 复合属性的顺序_html/css_WEB-ITnose

Jun 24, 2016 am 11:44 AM

CSS 参考手册

实例

在一个声明中设置所有字体属性:

1

p.ex1  {  font:italic arial,sans-serif;  }p.ex2  {  font:italic bold 12px/20px arial,sans-serif;  }

Copier après la connexion

亲自试一试

浏览器支持

IE Firefox Chrome Safari Opera
         

所有浏览器都支持 font 属性。

注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

定义和用法

font 简写属性在一个声明中设置所有字体属性。

注释:此属性也有第六个值:"line-height",可设置行间距。

说明

这个简写属性用于一次设置元素字体的两个或更多方面。使用 icon 等关键字可以适当地设置元素的字体,使之与用户计算机环境中的某个方面一致。注意,如果没有使用这些关键词,至少要指定字体大小和字体系列。

可以按顺序设置如下属性:

  • font-style
  • font-variant
  • font-weight
  • font-size/line-height
  • font-family
  • 可以不设置其中的某个值,比如 font:100% verdana; 也是允许的。未设置的属性会使用其默认值。

    默认值: 继承性: 版本: JavaScript 语法:
    not specified
    yes
    CSS1
    object.style.font="italic small-caps bold 12px arial,sans-serif"

    可能的值

    值 描述
    font-style 规定字体样式。参阅:font-style 中可能的值。
    font-variant 规定字体异体。参阅:font-variant 中可能的值。
    font-weight 规定字体粗细。参阅:font-weight 中可能的值。
    font-size/line-height 规定字体尺寸和行高。参阅:font-size 和 line-height 中可能的值。
    font-family 规定字体系列。参阅:font-family 中可能的值。
    caption 定义被标题控件(比如按钮、下拉列表等)使用的字体。
    icon 定义被图标标记使用的字体。
    menu 定义被下拉列表使用的字体。
    message-box 定义被对话框使用的字体。
    small-caption caption 字体的小型版本。
    status-bar 定义被窗口状态栏使用的字体。

    TIY 实例

    所有字体属性在一个声明之内 本例演示如何使用简写属性将字体属性设置在一个声明之内。 设置使用 "caption" 值的段落字体 本例演示如何设置使用 "caption" 值的段落字体。

    相关页面

    CSS 教程:CSS 字体

    HTML DOM 参考手册:font 属性

    CSS 参考手册

    Déclaration de ce site Web
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

    Article chaud

    Combien de temps faut-il pour battre Split Fiction?
    3 Il y a quelques semaines By DDD
    Repo: Comment relancer ses coéquipiers
    3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
    Hello Kitty Island Adventure: Comment obtenir des graines géantes
    3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
    1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

    Article chaud

    Combien de temps faut-il pour battre Split Fiction?
    3 Il y a quelques semaines By DDD
    Repo: Comment relancer ses coéquipiers
    3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
    Hello Kitty Island Adventure: Comment obtenir des graines géantes
    3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
    1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

    Tags d'article chaud

    Bloc-notes++7.3.1

    Bloc-notes++7.3.1

    Éditeur de code facile à utiliser et gratuit

    SublimeText3 version chinoise

    SublimeText3 version chinoise

    Version chinoise, très simple à utiliser

    Envoyer Studio 13.0.1

    Envoyer Studio 13.0.1

    Puissant environnement de développement intégré PHP

    Dreamweaver CS6

    Dreamweaver CS6

    Outils de développement Web visuel

    SublimeText3 version Mac

    SublimeText3 version Mac

    Logiciel d'édition de code au niveau de Dieu (SublimeText3)

    Difficulté à mettre à jour la mise en cache des pages Web officielles du compte: comment éviter l'ancien cache affectant l'expérience utilisateur après la mise à jour de la version? Difficulté à mettre à jour la mise en cache des pages Web officielles du compte: comment éviter l'ancien cache affectant l'expérience utilisateur après la mise à jour de la version? Mar 04, 2025 pm 12:32 PM

    Difficulté à mettre à jour la mise en cache des pages Web officielles du compte: comment éviter l'ancien cache affectant l'expérience utilisateur après la mise à jour de la version?

    Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur? Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur? Mar 17, 2025 pm 12:27 PM

    Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur?

    Comment ajouter efficacement les effets de course aux images PNG sur les pages Web? Comment ajouter efficacement les effets de course aux images PNG sur les pages Web? Mar 04, 2025 pm 02:39 PM

    Comment ajouter efficacement les effets de course aux images PNG sur les pages Web?

    Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez? Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez? Mar 20, 2025 pm 06:05 PM

    Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez?

    Quelles sont les implications de sécurité de l'utilisation des iframes et comment puis-je les atténuer? Quelles sont les implications de sécurité de l'utilisation des iframes et comment puis-je les atténuer? Mar 18, 2025 pm 02:51 PM

    Quelles sont les implications de sécurité de l'utilisation des iframes et comment puis-je les atténuer?

    Comment utiliser le HTML5 & LT; METER & GT; élément pour afficher des données numériques dans une plage? Comment utiliser le HTML5 & LT; METER & GT; élément pour afficher des données numériques dans une plage? Mar 12, 2025 pm 04:08 PM

    Comment utiliser le HTML5 & LT; METER & GT; élément pour afficher des données numériques dans une plage?

    Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5? Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5? Mar 17, 2025 pm 12:20 PM

    Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5?

    Quel est le but du & lt; mètre & gt; élément? Quel est le but du & lt; mètre & gt; élément? Mar 21, 2025 pm 12:35 PM

    Quel est le but du & lt; mètre & gt; élément?

    See all articles