淘先锋技术网

首页 1 2 3 4 5 6 7

在CSS3中,字体规则得到了极大的改善和优化,通过新的CSS3 Font规则,我们可以更方便的控制文本的字体、字重、字形和大小等属性,可以让网页设计更加精美。

@font-face {
font-family: 'Dosis'; /*字体名称*/
src: url('../fonts/dosis-regular-webfont.eot'); /*字体文件位置*/
src: url('../fonts/dosis-regular-webfont.eot?#iefix') format('embedded-opentype'), /*兼容IE*/
url('../fonts/dosis-regular-webfont.woff') format('woff'), /*兼容Safari和Chrome*/
url('../fonts/dosis-regular-webfont.ttf') format('truetype'), /*兼容其他浏览器*/
url('../fonts/dosis-regular-webfont.svg#DosisRegular') format('svg'); /*兼容iOS*/
font-weight: normal;
font-style: normal; /*字体特性*/
}
h1 {
font: 400 48px/54px 'Dosis', sans-serif;
/* font-weight: 400;       字体粗细,400为普通体
font-size: 48px;       字体大小,48px为正文标题字体大小
line-height: 54px;     行高,54px为正文标题行高
font-family: 'Dosis', sans-serif;  字体名称及备选字体*/
}

通过CSS3 Font规则,我们可以使用@font-face属性来导入自定义字体,而不仅限于操作系统自带的字体,让网页设计师在字体选择上更加自由。

同时,通过font-weight属性和font-style属性,我们可以更加精细地控制字体的特性和风格,使文字呈现更加丰富的视觉效果。

在设计网页时,掌握并合理运用CSS3 Font规则将会大大提升网页的视觉效果和用户体验。