以下の表は、テキストスタイルにおけるfontのいくつかの設定方法をまとめたものです:
属性名 | 説明 | CSSバージョン |
font-size | Setフォントサイズ1 | |
英語フォントをスモールキャップに変換するかどうかを設定します | 1 | |
フォントを傾けるかどうかを設定 | 1 | |
するかどうかを設定しますフォントの追加 Thick | 1 | |
フォントフォントの設定 | 1 | |
フォントスタイルの複写設定 | 1 ~ 2 | |
ウェブを設定Font | 3 |
1.font-size
p { font-size: 50px;}
説明: この属性は、カスタム サイズに加えて、次の表に示すように、フォントのサイズを具体的に設定するために使用されます。は参考のためにのみ提供されています。
説明 | |
フォントサイズを設定します。各値は小さい値から大きい値までの固定値です。 | 具体的な値は実際にはブラウザによって定義されており、ブラウザごとに違いがある可能性があるため、使用されることはほとんどありません。 |
親を基準にしてフォントを設定します要素のフォント | のサイズ |
フォントサイズを設定するにはCSSピクセル長を使用しますこれはpxだけに限定されず、他の測定単位も使用できます | |
親要素のフォントを基準としたパーセンテージサイズを使用します |
//先设置父元素字体大小 body { font-size: 50px; }//再设置相对小一些 p { font-size: smaller; }
具体的な相対サイズもブラウザによって定義されます。
2.font-variant
この表は、この属性が英語の文字にのみ有効であり、次の値が使用できることを明確に示しています。
Description | |
は、小文字の場合は小文字に戻すことを意味します | |
小文字を小文字で表示します |
<span>Scolia</span>
未設定時:
設定後:
span { font-variant: small-caps;}
これを見れば、何のことか分かると思います。
スモールキャップあまりにも。
normal の値の話の続きです。この値の適用シナリオは、親要素が small-caps の値を最初に設定しているのですが、small-caps の値の効果を表示したくないのです。現時点では、デフォルトの効果に戻る通常の機能を使用できます。
//先让父元素设置小型大写body { font-variant: small-caps;}//让子元素设置恢复小写span { font-variant: normal;}
3.font-style
このプロパティはフォントを斜めにするかどうかを設定するもので、以下の値から選択できます。
説明 | |||||||||||||
はチルト状態を通常に戻すことを意味します | |||||||||||||
は斜体を使用することを意味します | |||||||||||||
は、テキストを傾けることを意味します。相違点は斜体なしで使用されます |
值 | 说明 |
normal | 表示让加粗的字体恢复正常 |
bold | 表示让加粗的字体恢复正常 |
bolder | 更粗的字体 |
lighter | 轻细的字体 |
100 ~ 900 之间的数字 | 600 及之后是加粗,之前不加粗 |
p { font-weight: bold;}
解释:使用lighter,会让字体比普通效果更细,但是bold和bolder的效果是一样的,浏览器体现不出其中的差别。
5.font-family
设定使用的字体的名称,当然这个字体要用户已经安装了的,不然没效。
p { font-family: 微软雅黑; /*只声明一个字体,如用户没安装,则无效*/} p { font-family: 楷体,微软雅黑,宋体; /*使用备用字体,会依次查找,找的哪个用哪个*/}
6.font
可以用一个属性,对上面的所有效果进行设置,其有效的值是一样的。
p { font: 50px 楷体;}
解释:其格式是这样的:[是否倾斜|是否加粗|是否转小型大写] 字体大小 字体名称;[]代表可选,|代表用来分隔选项,并不是要将|写进去。
7.@font-face
为了防止自己使用的字体而客户端没有安装,造成现实效果与设计的不同的情况,可以在服务器提供相应的字体。
@font-face { font-family: abc; /*为提供的字体起个别名方便引用*/ src: url('BrushScriptStd.otf'); /*字体文件的在服务器的路径*/}p { font-size: 50px; font-family: abc; /*引用时使用别名*/}
其实css中的字体属性和文本样式属性还是很容易高混的,因为它们的都针对与文字,下面我总结一些字体属性到底可是设置什么:
1.字体大小,特有
2.怪异的大小写,文本样式中也有关于大小写的设置,但对字体设置大小写会出现小型大写字母这种特殊效果
3.文字加粗,特有
4.文字倾斜,特有
5.字体控制,特有
其实总结起来,字体属性和文本样式属性真正作用有所重叠的地方就只有大小写这里,但因为字体等级的大小写的行为很怪异,不符合我们常规期待,所以还算好区分。
而感觉作用的效果来看,文字属性主要是设置一些很基本的东西,而文本样式属性这用于各种效果级的展示。