AT - 規(guī)則：@import，@media 和 @font-face

levy9527 發(fā)布于2019-08-30 15:53 / 1807人閱讀

摘要：規(guī)則它現(xiàn)在被廣泛用作在網(wǎng)頁中嵌入字體。支持新的規(guī)則，但是僅支持類型的字體。規(guī)則規(guī)則用來導(dǎo)入其它的文件。規(guī)則必須被放置在一個樣式表的頂部，在任何其他規(guī)則上面。規(guī)則可用于樣式應(yīng)用到一個特定的媒體，如印刷品。

font-face 規(guī)則

@font-face 它現(xiàn)在被廣泛用作在網(wǎng)頁中嵌入字體。

@font-face {
    font-family: "font of all knowledge";
    src: local("font of all knowledge"), local(fontofallknowledge), url(fontofallknowledge.woff);
    font-weight: 400;
    font-style: normal;
}

Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 類型的字體。
Internet Explorer 9+ 支持新的 font-face 規(guī)則，但是僅支持 .eot 類型的字體 (Embedded OpenType)。

import 規(guī)則

@import規(guī)則 用來導(dǎo)入其它的 CSS 文件。

@import URL（morestyles.css）;

如果一個站點(diǎn)需要很長的，復(fù)雜的樣式表如果他們被分解成更小的文件中，可能會更容易管理。

@import 規(guī)則必須被放置在一個樣式表的頂部，在任何其他規(guī)則上面。

media 規(guī)則

@media 可用于樣式應(yīng)用到一個特定的媒體，如印刷品。

@media print {
    body {
        font-size: 10pt;
        font-family: times, serif;
    }

    #navigation {
        display: none;
    }
}

@media 可以包括_屏幕 (screen)_，_打印 (print)_，_投影 (projection)_，_手持式設(shè)備 (handheld)_，和_所有 (all)_，或以逗號分隔的多個列表，如：

@media screen, projection {
    /* ... */
}

CSS 3 允許你的目標(biāo)不只是特定的媒體也涉及該媒體的變量，如屏幕尺寸（針對手機(jī)特別有幫助）。

云服務(wù)器 GPU云服務(wù)器 font-face important Imports Importer

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/116556.html

相關(guān)文章

【Hello CSS】第一章-CSS的語法與工作流

摘要：本篇則主要介紹的語法與是如何工作的。語法基本規(guī)則規(guī)則主要由兩部分組成選擇器與聲明。屬性與值之間由冒號隔開，聲明與聲明直接由分號隔開。是用來定義使用在樣式表中的命名空間的規(guī)則。用來檢測規(guī)則組的規(guī)則是否生效。作者：陳大魚頭 github： KRISACHAN 在上一篇【Hello CSS】的序章CSS起源中介紹了CSS的誕生原因以及發(fā)展歷史，了解了CSS的存在意義。從正篇篇開始將會正式開...

BlackHole1 2019-05-23 17:34 評論0 收藏0
【Hello CSS】第一章-CSS的語法與工作流

摘要：本篇則主要介紹的語法與是如何工作的。語法基本規(guī)則規(guī)則主要由兩部分組成選擇器與聲明。用于自定義的樣式用于給網(wǎng)頁指定文本字體。作者：陳大魚頭 github： KRISACHAN 在上一篇【Hello CSS】的序章CSS起源中介紹了CSS的誕生原因以及發(fā)展歷史，了解了CSS的存在意義。從正篇篇開始將會正式開始介紹CSS這門語言的特點(diǎn)與功能。本篇則主要介紹CSS的語法與CSS是如何工...

kelvinlee 2019-08-30 10:49 評論0 收藏0
胡子哥的重學(xué)前端（筆記）css語法

摘要：規(guī)則在外部樣式表文件內(nèi)使用。指定該樣式表使用的字符編碼。當(dāng)你重置瀏覽器大小的過程中，頁面也會根據(jù)瀏覽器的寬度和高度重新渲染頁面。上說沒有瀏覽器支持，暫不研究允許子孫元素使用取值序列中的值循環(huán)替換繼承而來的值。函數(shù)返回選擇元素的屬性值。 at 規(guī)則 @charset 在外部樣式表文件內(nèi)使用。指定該樣式表使用的字符編碼。該規(guī)則后面的分號是必需的，如果省略了此分號，會生成錯誤信息。在外部cs...

kelvinlee 2019-08-30 15:55 評論0 收藏0
胡子哥的重學(xué)前端（筆記）css語法

摘要：規(guī)則在外部樣式表文件內(nèi)使用。指定該樣式表使用的字符編碼。當(dāng)你重置瀏覽器大小的過程中，頁面也會根據(jù)瀏覽器的寬度和高度重新渲染頁面。上說沒有瀏覽器支持，暫不研究允許子孫元素使用取值序列中的值循環(huán)替換繼承而來的值。函數(shù)返回選擇元素的屬性值。 at 規(guī)則 @charset 在外部樣式表文件內(nèi)使用。指定該樣式表使用的字符編碼。該規(guī)則后面的分號是必需的，如果省略了此分號，會生成錯誤信息。在外部cs...

Sleepy 2019-08-23 15:12 評論0 收藏0
重學(xué)前端學(xué)習(xí)筆記（十）--CSS語法關(guān)于帶@的規(guī)則

摘要：指普通的規(guī)則，由選擇器和屬性指定構(gòu)成的規(guī)則。用于跟命名空間配合的一個規(guī)則，表示內(nèi)部的選擇器全都帶上特定命名空間。注意屬性不允許使用連續(xù)的兩個中劃線開頭，否則會被認(rèn)為是變量。筆記說明重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時間開的一個專欄，每天10分鐘，重構(gòu)你的前端知識體系，筆者主要整理學(xué)習(xí)過程的一些要點(diǎn)筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【原文有...

codeKK 2019-08-02 16:16 評論0 收藏0