【第1章】参考: 1.1 attr keyframes; 1.2 attr animation; 1.3 attr animation name; 1.4 attr animation duration; 1.5 attr animation timing function; 1.6 attr animation delay; 1.7 attr animation iteration count; 1.8 attr animation direction; 1.9 attr animation play state; 1.10 attr background; 1.11 attr background attachment; 1.12 attr background color; 1.13 attr background image; 1.14 attr background position; 1.15 attr background repeat; 1.16 attr background clip; 1.17 attr background origin; 1.18 attr background size; 1.19 attr border; 1.20 attr border bottom; 1.21 attr border bottom color; 1.22 attr border bottom style; 1.23 attr border bottom width; 1.24 attr border color; 1.25 attr border left; 1.26 attr border left color; 1.27 attr border left style; 1.28 attr border left width; 1.29 attr border right; 1.30 attr border right color; 1.31 attr border right style; 1.32 attr border right width; 1.33 attr border style; 1.34 attr border top; 1.35 attr border top color; 1.36 attr border top style; 1.37 attr border top width; 1.38 attr border width; 1.39 attr outline; 1.40 attr outline color; 1.41 attr outline style; 1.42 attr outline width; 1.43 attr border bottom left radius; 1.44 attr border bottom right radius; 1.45 attr border image; 1.46 attr border image outset; 1.47 attr border image repeat; 1.48 attr border image slice; 1.49 attr border image source; 1.50 attr border image width; 1.51 attr border radius; 1.52 attr border top left radius; 1.53 attr border top right radius; 1.54 attr box shadow; 1.55 attr overflow x; 1.56 attr overflow y; 1.57 attr overflow style; 1.58 attr rotation; 1.59 attr rotation point; 1.60 attr opacity; 1.61 attr padding; 1.62 attr padding bottom; 1.63 attr padding left; 1.64 attr padding right; 1.65 attr padding top; 1.66 attr height; 1.67 attr max height; 1.68 attr max width; 1.69 attr min height; 1.70 attr min width; 1.71 attr width; 1.72 attr flex; 1.73 attr flex grow; 1.74 attr flex shrink; 1.75 attr flex basis; 1.76 attr flex flow; 1.77 attr flex direction; 1.78 attr flex wrap; 1.79 attr align content; 1.80 attr align items; 1.81 attr align self; 1.82 attr justify content; 1.83 attr order; 1.84 attr box align; 1.85 attr box direction; 1.86 attr box flex; 1.87 attr box flex group; 1.88 attr box lines; 1.89 attr box ordinal group; 1.90 attr box orient; 1.91 attr box pack; 1.92 attr font; 1.93 attr font family; 1.94 attr font size; 1.95 attr font style; 1.96 attr font variant; 1.97 attr font weight; 1.98 attr font face; 1.99 attr font size adjust; 1.100 attr font stretch; 1.101 attr content; 1.102 attr counter increment; 1.103 attr counter reset; 1.104 attr quotes; 1.105 attr grid columns; 1.106 attr grid rows; 1.107 attr target; 1.108 attr target name; 1.109 attr target new; 1.110 attr target position; 1.111 attr list style; 1.112 attr list style image; 1.113 attr list style position; 1.114 attr list style type; 1.115 attr margin; 1.116 attr margin bottom; 1.117 attr margin left; 1.118 attr margin right; 1.119 attr margin top; 1.120 attr column count; 1.121 attr column fill; 1.122 attr column gap; 1.123 attr column rule; 1.124 attr column rule color; 1.125 attr column rule style; 1.126 attr column rule width; 1.127 attr column span; 1.128 attr column width; 1.129 attr columns; 1.130 attr bottom; 1.131 attr clear; 1.132 attr clip; 1.133 attr cursor; 1.134 attr display; 1.135 attr float; 1.136 attr left; 1.137 attr overflow; 1.138 attr position; 1.139 attr right; 1.140 attr top; 1.141 attr visibility; 1.142 attr z index; 1.143 attr page break after; 1.144 attr page break before; 1.145 attr page break inside; 1.146 attr border collapse; 1.147 attr border spacing; 1.148 attr caption side; 1.149 attr empty cells; 1.150 attr table layout; 1.151 attr color; 1.152 attr direction; 1.153 attr letter spacing; 1.154 attr line height; 1.155 attr text align; 1.156 attr text decoration; 1.157 attr text indent; 1.158 attr text transform; 1.159 attr vertical align; 1.160 attr white space; 1.161 attr word spacing; 1.162 attr text emphasis; 1.163 attr hanging punctuation; 1.164 attr punctuation trim; 1.165 attr text align last; 1.166 attr text justify; 1.167 attr text outline; 1.168 attr text overflow; 1.169 attr text shadow; 1.170 attr text wrap; 1.171 attr word break; 1.172 attr word wrap; 1.173 attr transform; 1.174 attr transform origin; 1.175 attr transform style; 1.176 attr perspective; 1.177 attr perspective origin; 1.178 attr backface visibility; 1.179 attr transition; 1.180 attr transition property; 1.181 attr transition duration; 1.182 attr transition timing function; 1.183 attr transition delay; 1.184 attr appearance; 1.185 attr box sizing; 1.186 attr icon; 1.187 attr nav down; 1.188 attr nav index; 1.189 attr nav left; 1.190 attr nav right; 1.191 attr nav up; 1.192 attr outline offset; 1.193 attr resize; 1.194 sel class; 1.195 sel id; 1.196 sel all; 1.197 sel element; 1.198 sel element comma; 1.199 sel element element; 1.200 sel element gt; 1.201 sel element plus; 1.202 sel attribute; 1.203 sel attribute value; 1.204 sel attribute value contains; 1.205 sel attribute value lang; 1.206 sel link; 1.207 sel visited; 1.208 sel active; 1.209 sel hover; 1.210 sel focus; 1.211 sel first letter; 1.212 sel first line; 1.213 sel first child; 1.214 sel before; 1.215 sel after; 1.216 sel lang; 1.217 sel gen sibling; 1.218 sel attr begin; 1.219 sel attr end; 1.220 sel attr contain; 1.221 sel first of type; 1.222 sel last of type; 1.223 sel only of type; 1.224 sel only child; 1.225 sel nth child; 1.226 sel nth last child; 1.227 sel nth of type; 1.228 sel nth last of type; 1.229 sel last child; 1.230 sel root; 1.231 sel empty; 1.232 sel target; 1.233 sel enabled; 1.234 sel disabled; 1.235 sel checked; 1.236 sel not; 1.237 sel selection; 1.238 sel out of range; 1.239 sel in range; 1.240 sel read write; 1.241 sel read only; 1.242 sel optional; 1.243 sel required; 1.244 sel valid; 1.245 sel invalid; 1.246 func attr; 1.247 func calc; 1.248 func cubic bezier; 1.249 func hsl; 1.250 func hsla; 1.251 func linear gradient; 1.252 func radial gradient; 1.253 func repeating linear gradient; 1.254 func repeating radial gradient; 1.255 func rgb; 1.256 func rgba; 1.257 func var; 1.258 keyword initial; 1.259 keyword inherit; 1.260 attr unicode bidi; 1.261 attr animation fill mode; 1.262 attr filter; 1.263 attr media query; 1.264 attr text decoration color; 1.265 attr text decoration line; 1.266 attr text decoration style; 1.267 attr tab size

第1章第98节 attr font face

教程阅读运行代码

CSS3 @font-face 规则

实例

指定名为"myFirstFont"的字体，并指定在哪里可以找到它的URL：

@font-face {
    font-family: myFirstFont;
    src: url('Sansation_Light.ttf'),
         url('Sansation_Light.eot'); /* IE9 */
}

浏览器支持

Internet Explorer 9, Firefox, Opera,Chrome, 和 Safari支持@font-face 规则.

但是, Internet Explorer 9 只支持 .eot 类型的字体, Firefox, Chrome, Safari, 和 Opera 支持 .ttf 与.otf 两种类型字体。

注意： Internet Explorer 8 及更早IE版本不支持@font-face 规则。

属性定义及使用说明

@font-face规则，网页设计师再也不必使用的"web-safe"的字体之一。

字体的名称，font - face规则：

font-family: myFirstFont;

字体文件包含在您的服务器上的某个地方，参考CSS：

src: url('Sansation_Light.ttf')

如果字体文件是在不同的位置，请使用完整的URL：

src: url('http://www.nowcoder.com/css3/Sansation_Light.ttf')

现在准备使用该字体，下面是如何使用它所有的div元素的一个例子：

div {
    font-family: myFirstFont;
}

语法：

@font-face {
    font-properties
}

以下实例为在div中使用的字体：

div {
    font-family: myFirstFont;
}

字体描述	值	说明
font-family	name	必需的。定义字体的名称。
src	URL	必需的。定义该字体下载的网址（S）
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	可选。定义该字体应该如何被拉长。默认值是"正常"
font-style	normal italic oblique	可选。定义该字体应该是怎样样式。默认值是"正常"
font-weight	normal bold 100 200 300 400 500 600 700 800 900	可选。定义字体的粗细。默认值是"正常"
unicode-range	unicode-range	可选。定义该字体支持Unicode字符的范围。默认值是"ü+0-10 FFFF"

相关文章

CSS3 教程: CSS3 Fonts

上一节下一节>