Question

我找到了字体定义并想知道：

本地定义了什么？
font-weight和font-style有什么区别？

CSS

 @font-face {
font-family: 'FontinSans';
src: local('...'), url('fontin_sans_regular.woff') format('woff');
font-weight: normal;
font-style: 400;
}

Answer 1

以下是您的解决方案：

local()将从您的计算机中获取字体。表示机器中已存在的任何字体都将优先使用。

请阅读this以更清楚地了解font-face

2. font-weight用于显示如何显示清晰的字体，如更轻...轻...正常......粗体...焊接 font-style适用于 italic..normal..oblique

Answer 2

local（）尝试在用户计算机上安装该字体时使用该字体。

Font-weight定义字体的粗体，font-style允许您以斜体显示字体。

Answer 3

使用@ font-face的正确方法：

@font-face {
font-family: 'FontinSans';
src: url('fontin_sans_regular.eot'); /* IE9 Compat Modes */
src: url('fontin_sans_regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('fontin_sans_regular.woff') format('woff'), /* Modern Browsers */
     url('fontin_sans_regular.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('fontin_sans_regular.svg#svgFontName') format('svg'); /* Legacy iOS */
}

为何选择本地？：

使用@ font-face技术的一个小缺点是在将新字体加载到浏览器时显示的空白区域;对于已经在其系统上本机拥有该字体的用户来说，这尤其不必要。

解决这个问题的方法非常简单;使用local（）来检查是否字体首先在用户的系统上。

字体样式：font-style属性指定文本的字体样式。

normal      The browser displays a normal font style. This is default.
italic      The browser displays an italic font style.
oblique     The browser displays an oblique font style.

字体大小：font-size属性设置字体的大小。

以下是值：

xx-small    Sets the font-size to an xx-small size.
x-small     Sets the font-size to an extra small size.
small       Sets the font-size to a small size.
medium      Sets the font-size to a medium size.
large       Sets the font-size to a large size.
x-large     Sets the font-size to an extra large size.
xx-large    Sets the font-size to an xx-large size.
smaller     Sets the font-size to a smaller size than the parent element.
larger      Sets the font-size to a larger size than the parent element.

字体粗细：font-weight属性设置文本中应显示多么粗或细的字符。

以下是值：

normal  Defines normal characters. This is default
bold    Defines thick characters.   
bolder  Defines thicker characters.     
lighter Defines lighter characters.     
100
200
300
400
500
600
700
800
900

干杯..

Answer 4

@font-face {
font-family: Delicious;
src: url(Delicious-Roman.eot);
src: url('Delicious'), local(Delicious'),
url(Delicious-Roman.otf) format('opentype');
}

如何定义CSS字体？

4 个答案: