5.css字体_html/css_WEB-ITnose

以下の表は、テキストスタイルにおけるfontのいくつかの設定方法をまとめたものです:

Setフォントサイズ 1font-variant英語フォントをスモールキャップに変換するかどうかを設定します1font-styleフォントを傾けるかどうかを設定1font-weight するかどうかを設定しますフォントの追加 Thick1font-familyフォントフォントの設定1font フォントスタイルの複写設定1 ~ 2@font-faceウェブを設定Font3

属性名	説明	CSSバージョン
font-size

表中の属性名はすべて font で始まるという特徴があり、これらの属性がフォント用であることを意味します。

1.font-size

p {    font-size: 50px;} 

説明: この属性は、カスタム サイズに加えて、次の表に示すように、フォントのサイズを具体的に設定するために使用されます。は参考のためにのみ提供されています。

値説明xx-smallフォントサイズを設定します。各値は小さい値から大きい値までの固定値です。 x-smallsmallmediumlargex-largexx-large smaller親を基準にしてフォントを設定します要素のフォント 大きくする数値+pxnumber+%親要素のフォントを基準としたパーセンテージサイズを使用します

	具体的な値は実際にはブラウザによって定義されており、ブラウザごとに違いがある可能性があるため、使用されることはほとんどありません。
	のサイズ
	フォントサイズを設定するにはCSSピクセル長を使用します これはpxだけに限定されず、他の測定単位も使用できます

小さい方と大きい方について簡単に説明します まず、これら 2 つの値を有効にするには、まず を設定する必要があります。親要素のフォントサイズを設定し、親要素を基準として相対的なサイズを導き出します。

//先设置父元素字体大小 body {    font-size: 50px; }//再设置相对小一些 p {    font-size: smaller; }

具体的な相対サイズもブラウザによって定義されます。

2.font-variant

この表は、この属性が英語の文字にのみ有効であり、次の値が使用できることを明確に示しています。

valueDescriptionnormal は、小文字の場合は小文字に戻すことを意味しますsmall-caps小文字を小文字で表示しますまずここで スモールキャップについて話すとき、実際にはすべての小文字を大文字に変換します。いわゆるスモールキャップは、大文字化後にフォントのサイズが変更されず、元の大文字と小文字に影響を与えないことを意味します。具体的な効果は以下の通りです:

<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

このプロパティはフォントを斜めにするかどうかを設定するもので、以下の値から選択できます。

valuenormalitalicoblique

p {    font-style: italic;}

 

　　解释:normal和上面一样，就不再说明了。这里说下oblique，这个值一般在字体文件没有斜体时使用，一般用户安装的中文字体都是含有斜体的，可能会在其他国家文字上使用，不过使用的不多。

4.font-weight

　　设置字体是否加粗或变细，有下面的值可以选择：

説明
はチルト状態を通常に戻すことを意味します
は斜体を使用することを意味します
は、テキストを傾けることを意味します。相違点は斜体なしで使用されます

值	说明
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.字体控制，特有

　　其实总结起来，字体属性和文本样式属性真正作用有所重叠的地方就只有大小写这里，但因为字体等级的大小写的行为很怪异，不符合我们常规期待，所以还算好区分。

　　而感觉作用的效果来看，文字属性主要是设置一些很基本的东西，而文本样式属性这用于各种效果级的展示。