資訊專欄INFORMATION COLUMN
摘要：妨礙設(shè)計(jì)人員利用字體的全部特性的一項(xiàng)限制是無法訪問許多字體中內(nèi)置的大量可選特性。這些特性定義了字形替代和定位選項(xiàng)，以支持基本的版式特性如字距調(diào)整上標(biāo)和下標(biāo)上下文字形如連寫數(shù)字樣式以及訪問可選的東亞字形和花飾字體。
CSS font-feature-settings
IEBlog
由于提供了對(duì) CSS3 @font-face 規(guī)則和 WOFF 字體封裝格式的跨瀏覽器支持，現(xiàn)代的 Web 版式已遠(yuǎn)遠(yuǎn)超出了“Web 安全字體”所定義的范疇，像 New Yorker 這樣的知名雜志就使用了 Web 字體來彰顯標(biāo)題版式的獨(dú)特風(fēng)格，而在美國(guó)總統(tǒng)奧巴馬的競(jìng)選連任活動(dòng)中，也使用了 Web 字體服務(wù) Typekit 來托管其獨(dú)具一格的字體。
妨礙 Web 設(shè)計(jì)人員利用字體的全部特性的一項(xiàng)限制是：無法訪問許多字體中內(nèi)置的大量可選 OpenType? 特性。這些特性定義了字形替代和定位選項(xiàng)，以支持基本的版式特性（如字距調(diào)整、上標(biāo)和下標(biāo)）、上下文字形（如連寫、數(shù)字樣式）以及訪
問可選的東亞字形和花飾字體。
是不是很暈
舉個(gè)例子
html
The fix was in for the fiveflirting fleurons.
scss
p {
font-size: 40px;
margin-bottom: 10px;
padding-left: 10px;
font-style: italic;
}
body {
background-color: #ffffd;
font-family: "chaparral-pro";
margin: 0;
padding: 0;
}
span {
transition: color .3s ease;
}
.liga {
font-feature-settings: "sups" 1;
span {
color: lighten(red, 10);
}
}
button {
cursor: pointer;
margin-left: 10px;
&:after {
content: " on";
}
&.on:after {
content: " off";
}
}
js
var btn = document.querySelector("button"),
body = document.documentElement,
activeClass = "liga";
btn.addEventListener("click", function(e){
e.preventDefault();
body.classList.toggle(activeClass);
btn.classList.toggle("on");
});
按鈕未改變時(shí)效果
按鈕按下添加liga類
咦 為什么會(huì)是這樣呢 font-feature-setting為我們提供了更多的可以兼容opentype的功能
該特性兼容性
will-change屬性，允許作者提前告知瀏覽器的默認(rèn)樣式，那他們可能會(huì)做出一個(gè)元素。它允許對(duì)瀏覽器默認(rèn)樣式的優(yōu)化如何提前處理因素，在動(dòng)畫實(shí)際開始之前，為準(zhǔn)備動(dòng)畫執(zhí)行潛在昂貴的工作。
之前我們希望調(diào)用gpu進(jìn)行優(yōu)化時(shí)需要這么寫
.accelerate {
-webkit-transform: translate3d(0, 0, 0);
}
不過這樣瀏覽器就會(huì)耗費(fèi)很多資源 will-change可以有助于瀏覽器進(jìn)行優(yōu)化
該特性兼容性
該特性兼容性
CSS all簡(jiǎn)寫屬性重設(shè)除了unicode-bidi 和direction之外的所有屬性至它們的初始值或繼承值。
舉個(gè)例子
html
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Phasellus eget velit sagittis.
css
html { font-size: small; background-color: #F0F0F0; color:blue; }
blockquote { background-color: skyblue; color: red; }
然后這樣子
css加上一句
blockquote { all: unset; }
就可以屏蔽全局的影響
該特性兼容性
顧名思義 就是撤銷繼承過來的值
該特性兼容性
不太懂啊 返回瀏覽器原始? 沒啥用啊
該特性兼容性
ios支持css變量了
這里我們有一篇seagmentfault文章
該特性兼容性
可以自己組裝字體了 不過瀏覽器兼容性不太好
該特性兼容性
這次ios9.3最大的更新就是提供了picture element了
這里我給大家提供幾篇文章
whatwg介紹
瀏覽器內(nèi)建支持的響應(yīng)式圖像
響應(yīng)式圖片101(六)：picture元素
該特性兼容性
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/115131.html
摘要：再之后會(huì)有個(gè)月的延長(zhǎng)維護(hù)期。期間支持的變更嚴(yán)重的，嚴(yán)重的安全問題或者文檔更新。已經(jīng)成為協(xié)議的一個(gè)重大更新，并且正在積極地在上集成。此外，默認(rèn)情況下已禁用和，并且?guī)煲褎h除已棄用的函數(shù)。 前言 時(shí)隔一年，Node.js 12 如約而至，正式發(fā)布第一個(gè) Current 版本。它將從2019年10月開始進(jìn)入長(zhǎng)期支持（LTS）版本直到2022年4月。 該版本帶來的新特性： V8 更新帶來好多不...
摘要：廣義的定位，涉及到瀏覽器，手機(jī)里面的用戶交互展示的內(nèi)容，都屬于前端。對(duì)自己有好處因?yàn)槎啻魏桶⒗锏拿嬖嚬龠M(jìn)行了電話面試溝通，所以這些不只是一個(gè)面試官提出的問題，而是多個(gè)面試官提出的問題。保持一個(gè)虛心學(xué)習(xí)的狀態(tài)。 介紹 狹義的來講，前端指的就是我們常說的html, css, javascript. 三者必不可缺. 而其中涵蓋的知識(shí)點(diǎn)不可一篇文章就能完整的講述出來的。廣義的定位，涉及到瀏覽器...
摘要：我們一起看一下和的引入對(duì)現(xiàn)有的編碼方式會(huì)帶來哪些影響。和的引入同樣改變了這種現(xiàn)象作用域變量和對(duì)象屬性分得清清楚楚。和引入后，每次循環(huán)都會(huì)創(chuàng)建特定于當(dāng)次循環(huán)作用域的局部變量。 塊級(jí)作用域let&const js給人的感覺往往是用起來比較簡(jiǎn)單，語(yǔ)法上寬松。這給開發(fā)者帶來便利的同時(shí)也造成了一些違反思維習(xí)慣的別扭之處。es6一些新的特性的引入，可以認(rèn)為試圖糾正或補(bǔ)齊js最初設(shè)計(jì)的缺陷。 我們一...
閱讀 1516·2021-11-18 10:02
閱讀 1657·2021-09-04 16:40
閱讀 3170·2021-09-01 10:48
閱讀 873·2019-08-30 15:55
閱讀 1853·2019-08-30 15:55
閱讀 1364·2019-08-30 13:05
閱讀 3013·2019-08-30 12:52
閱讀 1623·2019-08-30 11:24
