HTML/CSS

Fonts & Interactions

Font Face

之前有介紹到設定字型，當使用者沒有字型時，瀏覽器會自動使用備用字型，而@font-face可以讓網頁載入網路上的字型，或是設計者的字型檔，讓網頁製作更具有彈性
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
@font-face{
     font-family:'OpenSansBold',Helvetica,Arial;     --這裡設定使用的字型與備用字型
     src:url('OpenSansBold-webfont.eot');    --字型的位置，也可以用local("字型名稱')
                                                                使用者電腦中的字型，以逗號分隔可設定備用字型
     font-style:normal;
     font-weight:bold;
}

Transforms

transform可以指定元素的特效

• transform:translate(3px,5px)  --向右移 3px 下移 5px，可以分別以translateX、translateY來設定
• transform:rotate(45deg);  --元素旋轉45度
• transform:scale(1.2)   --橫向、縱向縮放元素1.2倍，以逗點分隔或scaleX Y可分別                                           指定，若是scale(0,2)表示只有縱向放大兩倍
• transform:skewX(-25deg)     --元素橫向傾斜-25度，以逗點分隔或skewX Y可分別指定

Transitions

transition可以做出簡單的動畫效果，transition:<property> <duration> <timing-function> <delay>

• transition-property      --表示要改變之屬性的屬性名稱(background-color)，all表示全部
• transition-duration      --效果的持續時間，單位是/s秒，預設為0
• transition-timing-function   --效果的速度，有八種(ease、ease-in、ease-in-out、linear、cubic-bezier、step-start、step-end、steps())
• transition-delay           --效果發生的延遲時間

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
.element{
     background-color:black;
     color:white;
     transition:all 0.2s ease-in-out;   --效果持續0.2秒，.element的元件都會改顏色
}

.element:hover{
     background-color:grey;
     color:black;
}