よく使用される 13 個の CSS フォントスタイル属性、どれを知っていますか?-フロントエンドQ&A-php.cn

よく使用される 13 個の CSS フォントスタイル属性、どれを知っていますか?

WBOY

リリース： 2021-12-31 18:14:38

転載

4570 人が閲覧しました

この記事では、フォントスタイルを設定するときによく使用される CSS フォントスタイル属性をいくつか紹介します。

よく使用される 13 個の CSS フォントスタイル属性、どれを知っていますか?

#1. CSS フォントスタイルのプロパティ

1.1 font-size `フォントサイズ`

font-sizeこの属性は、フォントサイズの設定に使用されます。この属性の値には、相対長さ単位または絶対長さ単位を使用できます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">font-size: 14px; // px 绝对像素单位font-size: 1em; // 相对父元素字体大小单位// 注：每个元素必须有字体大小，如果没有申明，则直接使用父元素的字体大小// 如果没有父元素（html）则使用基准字号，基准字号为浏览器里设置的字号</pre><div class="contentsignin">ログイン後にコピー</div></div>
偶数のフォントサイズを使用するようにしてください。 IE6 などの古いブラウザでは、奇数をサポートするとバグが発生します。
このうち、相対長さの単位がより一般的に使用され、ピクセル単位 px が推奨されますが、絶対長さの単位はほとんど使用されません。詳細は次のとおりです。

1.2 font-family`フォントスタイル`

font-family 属性フォントを設定します。 Web ページで一般的に使用されるフォントには、Song Princess、Microsoft YaHei、HeiTi などがあります。たとえば、Web ページ内のテキストのすべての段落のフォントを Microsoft YaHei に設定するには、次の CSSスタイルを使用できます。コード: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> p{ font-family:"微软雅黑"; } // 注: 可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。</pre><div class="contentsignin">ログイン後にコピー</div></div>
中国語フォントでは英語で引用符が必要ですが、英語フォントでは通常引用符は必要ありません。英語フォントを設定する必要がある場合は、英語フォント名を中国語フォント名の前に指定する必要があります。
フォント名にスペース、#、$、その他の記号が含まれている場合は、英語ではフォントを一重引用符または二重引用符で囲む必要があります (例: font-family: “Times New Roman”;)。
システムのデフォルトフォントを使用して、どのユーザーのブラウザでも正しく表示できることを確認してください。
Web ページで最も一般的に使用されるフォントは、Steve Jobs によって開発された arial です

##1.3

CSS UnicodeFont

CSS
にフォント名を設定し、中国語を直接記述します。ただし、ファイルのエンコード（GB2312、UTF-8など）が一致しない場合は文字化けエラーが発生します。 XP システムは Microsoft Yahei と同様に中国語をサポートしていません。

よく使用される 13 個の CSS フォントスタイル属性、どれを知っていますか?

#タイプ名英語名Unicodeエンコーディング# #宋体SimSunNSimSunSimHeiMicrosoft YaHeiKaiTiGB2312LiSu YouYuan STXihei#XIMINGTIMingLiU\7EC6\660E\4F53 ##注: さまざまなコンピューターでのフォントのインストールの問題に対処するために、Song Diagnostic フォントと Microsoft Yahei 中国語フォントのみを使用するようにしています。


\5B8B\4F53		新宋体
\65B0\5B8B \ 4F53		黑体
\9ED1\4F53		Microsoft亚黑
\5FAE\8F6F\96C5\9ED1		イタリア語 GB2312
\6977\4F53_GB2312		公式スクリプト
\96B6\4E66		Youyuan
\5E7C\5706		华文丝黑
\534E\6587\7EC6\9ED1

font-weight

Font Weight

b タグと

strong

CSS を使用してフォントを太字にすることもできますが、 CSS 意味的な意味はありません。 拡張子: 強力な要素、デフォルトでは太字。 Strong 要素は、無視できない重要なコンテンツを表します
属性値関数font-weight:normal (略称 400) 太字なし太字 (略称 700)Bold100 ～ 900 (100 の整数倍)値が大きいほど、フォントは太くなります注: CSS 番号 400 は標準に相当し、700 は太字に相当します。しかし、私たちはそれを数字で表現することを好みます。

font-style

フォントスタイル

`斜体フォント (`i と

em# を使用する場合を除く) ## タグに加えて、

を使用してこれを実現できますが、CSS にはセマンティクスがありません。展開: i 要素で表現される言語: このテキストは特別なテキストです。実際の使用では、通常、アイコンを表すために使用されます。属性
属性値関数##font-style:normalデフォルト値の場合、ブラウザには標準のフォントスタイル italic が表示されます。ブラウザには斜体のフォントスタイル oblique# が表示されます。 ##
注：平时我们很少给文字加斜体，反而喜欢给斜体标签（em，i）改为普通模式
1.6 font 文字属性速写 (重点)
1. font属性用于对字体样式进行综合设置，其基本语法格式如下：
```
选择器{
	font: font-style font-weight font-size/line-height font-family;}// font:style weight size/行高 字体类型，大小和类型不能省略
```
  ログイン後にコピー
2. 使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
3. 注意：其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。
1.7 letter-spacing 字体间距
1. letter-spacing就是文字与文字间的间距，值可以负数，默认值normal
```
p{
	letter-spacing : 2px;}
```
  ログイン後にコピー
1.8 text-decoration 文本修饰：加线
1. line-through：穿过文字，表示中间加条线
2. overline：上面加条线（少用）
3. underline：下面加条线
4. none：表示没有线，去掉线
5. 拓展： del、s元素默认中间加线；del元素表示废弃、错误的内容；s元素表示过期的内容；a元素默认下面加线，表示超链接
1.9 text-indent 首行文本缩进
1. px：缩进多少像素
2. em：缩进几个字体（中英文缩进宽度值一样）
2.0 line-height 文本行高/垂直居中
1. 每行文本的高度，该值越大，每行文本的值越大
2. 设置行高为容器高度，可以让单行文本垂直居中，容器高度为如：height：50px
3. 行高可以设置为纯数字，表示相对于当前元素的字体大小。如取值1.5:行高为文字的1.5倍，这样文字在放大的时候，行高也在变大，不会出现文字重叠现象
2.1 letter-spacing 文字间隙
1. em：每个文字间隔几个字体宽度
2. px：每个文字间隔几个像素
2.2 text-align 文字、行盒、行块盒水平排列方式
1. left：靠左，默认靠左排列
2. center：居中
3. right：靠右
2.3 网页的最小和最大宽度
1. 设置在body元素的css里
2. min-width: 1000px 最小像素
3. max-width: 1500px 最大像素
（学习视频分享：css视频教程）

##ブラウザには斜体のフォントスタイルが表示されます