在网页中,我们可以用 CSS 的font-family属性来定义字体,然而定义的字体在用户的电脑上能否正确呈现则要看用户的电脑是否安装了该字体。我们经常能看到国外的一些个人网站使用了非常漂亮的字体,而这些字体通常在用户的电脑中是没有安装的,所以用font-family属性就无法实现了,今天我们就介绍使用 @font-face 实现个性化字体。
element1~element2选择器 element1~element2 选择器匹配出现在 element1 后面的 element2。 注意:element1 和 element2 这两种元素必须具有相同的父元素,但 element2 不必紧跟在 element1 的后面。 示例: [attribute*=value]选择器 [attribute*=value] 选择器匹配元素属性值包含指定值的元素。 示例: [attribute^=...
此特性通过@font-face实现。实例如下: Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。 Internet Explorer 9+ 支持新的 @font-face 规则,但是仅支持 .eot 类型的字体 (Embedded OpenType)。 @font-face { font-family: myFirstFont; src: url('S...
@font-face {font-family: 'MyFont';src: url('/path/to/my-font.ttf') format('truetype');} 这个示例将自定义字体文件my-font.ttf引入到页面中,并将其命名为MyFont。要使用该字体,只需在相应元素中设置font-family属性即可。 总结CSS3中的文本和字体新特性为前端开发提供了更多的样式选择和优化方式。通...
CSS3新特性应用之字体排印 一、插入换行 ~:表示同辈元素之后指定类型的元素,如;elm1 ~ elm2表示,elm1之后的所有elm2元素,且elm1与elm2都是在同一个父级元素。 +:表示同辈元素的兄弟元素。 \A:一个空白换行符 解决方案: 在dd与dt相邻的dt上的子元素前面加入一个空白换行符...
通过 CSS3,web 设计师可以使用他们喜欢的任意字体。当您您找到或购买到希望使用的字体时,可将该字体文件存放到 web 服务器上,它会在需要时被自动下载到用户的计算机上。您“自己的”的字体是在CSS3 @font-face 规则中定义的。浏览器支持属性浏览器支持@font-faceFirefox、Chrome、Safari 以及 Opera 支持 .ttf ...
CSS3 提供了很多可以把玩的新特性,模糊了之前只控制样式的定义,让之前很难处理的样式(如:圆角、多列等)和只能通过Javascript来实现的动画效果等现在都能通过CSS3 新特性提供的属性很轻松的实现,功能是越来越强大。 一、CSS3 边框 在css3 中新增的边框属性如下:...
CSS3 提供了很多可以把玩的新特性,模糊了之前只控制样式的定义,让之前很难处理的样式(如:圆角、多列等)和只能通过Javascript来实现的动画效果等现在都能通过CSS3 新特性提供的属性很轻松的实现,功能是越来越强大。 一、CSS3 边框 在css3 中新增的边框属性如下:...
CSS3 新特性学习 CSS3 是最新的 CSS 标准,并且完全向后兼容,不过目前W3C 仍然在对 CSS3 规范进行开发,虽然标准的规范还没有正式发布,但是现代浏览器已经支持相当多的 CSS3 属性了。CSS3 提供了很多可以把玩的新特性,模糊了之前只控制样式的定义,让之前很难处理的样式(如:圆角、多列等)和只能通过Javascript来...
C、CSS新特性: CSS3选择器、图片的视觉效果(圆角、阴影、渐变背景、图片边框等)、背景的应用(background-origin/background-clip/background-size)、盒模型的变化、阴影效果(文本阴影、盒子阴影)、多列布局和弹性盒布局、web文字和font图标、颜色和透明度、圆角和边框的新特效、2D和3D变形、CSS3过渡和动画效果、媒体...