你不一定知道的CSS中字体的相关知识

本文详细介绍了CSS中的字体族概念,包括serif、sans-serif、monospace等,以及如何设置多字体fallback。同时,探讨了网络字体和自定义字体的使用方法,通过@font-face进行声明,并给出了实际应用示例。此外,还讲解了如何查看网页中渲染的字体,以及Iconfont图标字体的获取和使用流程。
摘要由CSDN通过智能技术生成

字体族:serif,sans-serif,monospance,cursive(网页中使用较少),fantasy(花体),字体族是一类字体,而不是特定字体,如:monaco字体属于monospace(等宽字体族),simsun字体属于serif(衬线字体)。

 

对于网页中具体的字体,这里是Microsoft Yahei需要用引号引起来,而字体族serif,不能加引号,如下:

多字体fallback:当本地系统中找不到Microsoft Yahei1字体时,使用任意serif字体,见上图。

 

定义如下图字体,PingFang SC是苹果电脑默认渲染的字体,而window系统网页默认渲染字体大多是Mircosoft Yahei,这取决你系统设置的默认字体是什么,如下,如果你使用的是window系统,PingFang SC因为是苹果字体,所以失效,接着找后面一个,如果monaco在你本地系统中存在,即使用该字体,如果不存在就使用默认字体。

<

确定应用于所选字符串的字体。 ■使用方法 フォント判定したい文字列を選択し、右クリックで「Rendered Font」をクリック。 ※選択文字列の最初の一文字が判定対象となります。 ■ブラウザのフォント適用ロジックについて フォントはfont-familyに指定された順番で優先的に適用されます。また、フォントに該当の文字列が格納されていない場合は次の優先順位のフォントが適用され、いずれも適用できるフォントが無い場合はブラウザに設定されたデフォルトのフォントが適用されます。 つまり同じ文章でも一文字単位で違うフォントが適用される可能性があるため、フォント判定は任意の一文字を対象にする必要があります。 ■フォントの判定プロセス(概要) < 判定対象文字列の指定 > 1.ブラウザ上で判定対象となる文字列を選択し、右クリックで「Rendered Font」をクリック。選択文字列の最初の一文字が判定対象となります。 < font> 2.文字列を格納するDOM要素を取得し、window.getComputedStyleで要素に指定されているfont-familyを取得。 < 判定対象の文字列にfont-familyのどのフォントが適用されているかを調べる > 3.テスト用DOM要素を作成し、判定対象の1文字を10個(任意)ほど格納する。 4.まずは2で取得したfont-familyをそのまま適用したときの要素のwidthとheightを調べる 5.次にfont-familyに設定されたフォント名をそれぞれ単独で適用したときのwidthとheightを調べ、4の値と比較し、値が一致したフォントが実際に適用されているフォントであると判定します。 支持语言:日本語
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值