CSS3 font-smoothing和隐藏元素

木子又又又又
737 阅读2分钟

CSS3 font-smoothing

** 功能：**

CSS3中用于设置字体的抗锯齿或者说光滑度的属性。

** 语法规则：**

font-smoothing:subpixel-antialiased | none | antialiased

** 取值说明：**

none用于小像素的文本、subpixel-antialiased浏览器默认的、antialiased反锯齿

隐藏元素的4种方法

  • 1、display:none; 隐藏元素不占位
  • 2、position:absolute;left:-999px; 隐藏元素不占位
  • 3、visibility:hidden；隐藏元素但是占有位置 4、opacity:0; 隐藏元素但是占有位置

CSS3 backface-visibility

** 功能：**

定义当元素不面向屏幕时是否可见。

** 语法规则：**

backface-visibility:visible | hidden;

** 取值说明**

  • Visible：背面是可见的
  • Hidden：背面是不可见的

CSS3 @font-face

** 功能：**

@font-face是css3中的一个模块，主要用于将自己定义的Web字体嵌入到网页中。

** 语法规则：**

@font-face{
        font-family:<YourWebFontName>;
        src:<source>[<format][,<source>[<format>]]*;
        [font-weight:<weight>];
        [font-weight:<style>];
}

** 取值说明：**

  • YourWebFontName：此值指的就是你自定义的字体名称，最好是使用你下载的默认字体，他将被引用到你的Web元素中的font-family。 如：fpont-family：“YourWebFontName”
  • source ：此值指的是你自定义字体的存放路径，可以是相对路径也可以是绝对路径；
  • format：此值指的是你自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型； truetype , opentype , truetype-aat , embedded-opentype , avg等。
  • weight和style:weight定义字体是否为粗体，style主要定义字体样式，如，斜体。

常用的几种字体格式：

  • 1、TureType(.ttf)格式
  • 2、OpenType(.otf)格式
  • 3、Web Open Font Format(.woff)格式
  • 4、Embedded Open Type(.eot)格式
  • 5、SVG(.svg)格式

字体下载：

CSS3 animation

** 功能：**

（不需要时间来触发的）而 transition 需要 鼠标事件来触发的 用于创建动画

** 语法规则：**

  • animation： name duration timing-function delay iteration-count diraction

         动画名称   速度   播放曲线（形式）  延时     播放次数   反向播放

  • animation-name 规定需要绑定到选择器的keyframe名称

  • animation-duration 完成动画所花费的时间，以 秒 或 毫秒计算

  • animation- timing-function 规定动画的 速度曲线

  • animation-delay 在动画开始之前的延迟时间

  • animation-iteration-count 动画应该播放的次数

  • animation-diraction 是否应该轮流 反向播放动画

avatar
文章
阅读
粉丝