CSS字型

學習如何在CSS中使用字型 在Web的黎明時期,你只能選擇少數幾種字型。 幸運的是,如今你可以在你的網頁上載入任何種類的字型。 CSS在字型方面在多年來獲得了許多不錯的功能。 font屬性是一些屬性的縮寫: font-family font-weight font-stretch font-style font-size 讓我們逐一介紹它們,然後再討論font。 接著,我們將討論如何載入自訂字型,可以使用@import或@font-face,或通過載入字型樣式表來載入。 font-family 設置元素將使用的字型家族。 為什麼是"家族"? 因為我們所了解的字型實際上是由幾個子字型組成的,這些子字型提供了我們所需要的所有樣式(粗體、斜體、輕鬆等)。 這是我Mac上的Font Book應用程式中的一個示例 - Fira Code字型家族下面有幾個專用字型: 這個屬性讓你可以選擇特定的字型,例如: body { font-family: Helvetica; } 你可以設置多個值,所以如果第一個值由於某些原因不能使用(例如在機器上找不到或下載字型的網絡連接失敗),則使用第二個值: body { font-family: Helvetica, Arial; } 到目前為止,我使用了一些特定的字型,我們稱之為Web安全字型,因為它們預安裝在不同的操作系統中。 我們將它們分成有衬线字体、无衬线字体和等宽字体。以下是一些最受歡迎的列表: 有衬线字体 Georgia Palatino Times New Roman Times 无衬线字体 Arial Helvetica Verdana Geneva Tahoma Lucida Grande Impact Trebuchet MS Arial Black 等宽字体 Courier New Courier Lucida Console Monaco 你可以將所有這些用作font-family屬性,但是不能保證它們在每個系統上都存在。還有其他的字体,对于它们的支持程度各不相同。 你也可以使用通用名称: sans-serif 无衬线字体 serif 有衬线字体 monospace 等宽字体 cursive 用于模拟手写文本 fantasy 名字中已经说明了一切 通常在font-family定义的末尾使用这些通用名称,以提供后备值,以防止无法应用其他样式:...

如何創建一個滑鼠離開視窗時彈出的彈窗

你知道那些當你試圖關閉瀏覽器視窗時出現的煩人彈窗嗎? 它們好像知道你在試圖關閉視窗,就像它們能讀取你的思想一樣。 實際上,這是一個非常簡單的概念,你需要聽取特定的DOM事件。 我個人不推薦使用彈窗,因為我覺得它們很煩人,但是你的公司可能要求你實現一個,所以在這裡我們就來實現一個。 我喜歡保持事情簡單,所以這裡是HTML的部分: <!doctype html> <head> <title>彈窗頁面</title> </head> <body> <div id="popup"> <h3>彈窗!</h3> </div> </body> 再來是這部分的CSS: body { font-family: system-ui; background-color: #f6d198; } #popup { position: fixed; width: 100%; visibility: hidden; z-index: 10002; top: 0; opacity: 0; transform: scale(0.5); transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s; position: relative; margin: 0 auto; text-align: center; box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); width: 60%; background: #862a5c; padding-bottom: 100px; padding-top: 50px; color: #fff; font-size: 2rem; } 最後是這段JavaScript:...