iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 30
3

★ 地圖異次元空間 ↓↓↓

顯示勇者試煉塔位置圖

歡迎來到 F.X 世界

試煉塔 [NPC]
CSS 起死回生的秘密兵器,
透過操縱者,即將啟動。

關卡機制:

  • 檢視是否對能力者屬性,已熟悉理解。
  • 使用傳送卷軸,解析攻略,快速破關。

關於試煉的說明到此結束,
其他相關的細節,就請你在遊戲中取得吧!


★★★ 關卡條件 ↓↓↓

Typography

透過排版使得文字易認、可讀和優美的技藝。排版,即安排活字的方式,包括字體與字號的選取、欄寬與行高的設定以及字距的調整等。在西方設計領域,被喻為「二維的建築」。

★ 副本關卡挑戰:

  1. inline 元素與 line-box 關係? anonymous inline element 何時產生?
  2. inline 元素設定寬度與高度,為何失效? 與字型預設值有關?
  3. replaced elements 設定寬度與高度為何能正常顯示? 何謂內在維度? 能設定寬度與高度值皆為置換元素,例如 <button> 元素?
  4. 「字體」與「字型」有何區別? 字型家族名稱和字體通用名稱使用差異?
  5. 展示性字體與內文性字體使用情境? <h1> 元素使用時機以及可多次使用?

★ 追加耐力度技能點數:

<p>
  Good design will be <span>better</span>. We get to make a consequence.
</p>
<!-- 第一題:<p>元素裡,總共包含一個<span>元素? 而line-box總高度由誰決定? -->
span { width: 300px; height: 100px; padding: 20px; } 
/* 第二題:<span>寬高是否為有效值? 而內距屬性值間接影響文本行高? */
img { margin: auto; height: 150px; } 
/* 第三題:<img>為版面置中? 高度設定值會造成失效或變形? 初始值同等於設定display: inline-block? */
p { font-family: sans-serif, Cinzel Decorative; } 
/* 第四題:屬性設定值是否正確? 提示:至少四個錯誤。 */
h4, p { font-size: 16px; } 
/* 第五題:瀏覽器預設<h4>與<p>字級皆為16px,兩者間有何差異? */

★ 使用傳送卷軸:


Character

字符是資訊單位,大約對應於字形,字形狀單元或符號。如一個字母或音節在書面形式,產生的自然語言。包括字母,數字,通用標點符號和空白字元等。常用為 UTF-8 編碼,包含 ASCIIUnicode 編碼。

★ 副本關卡挑戰:

  1. font-size 絕對單位與相對單位參考依據為何? 何謂視口相對單位?
  2. font-weight 設定值什麼情況會失效? bolderlighter 分別?
  3. currentColoropacitytransparent 使用方式?
  4. 字體 baseline 高度同等於 text-decoration: underlineunderline 值高度又同等於字體 descender line
  5. font-style屬性值 italic 同等於 obliqueoblique 又同等於偽斜體
  6. font-variant屬性值 small-caps 與全大寫字母 all caps 差異?

★ 追加攻擊力技能點數:

html { font-size: 62.5%; } h5 { font-size: 1rem; } 
/* 第一題:chrome瀏覽器,字級尺寸顯示為10px? */
h3 { font-weight: 900; } 
/* 第二題:chrome瀏覽器,字重是否失效? */
section { background-color: rgb(50%, 256, 50%, 1.2) } 
/* 第三題:顯示顏色為何? 屬性值是否失效? */
p { text-decoration: underline; }
/* 第四題:是否達到強調重點功能性? 文本閱讀性提高? 而遇到Descent產生結果如何? */
h2 { font-style: italic; } 
/* 第五題:字體顯示為斜體? 傾斜體? 或偽斜體? */
p { font-variant: small-caps; } 
/* 第六題:與正統小型大寫字母有何差異? */

★ 使用傳送卷軸:


Word

在語言學,一個字為最小元素,可以客觀或實際單獨存在著含義。這與 morpheme 形成了鮮明的對比,後者是意義的最小單位,但不一定獨立存在。一個單詞可能包含一個或多個 morpheme 等。

★ 副本關卡挑戰:

  1. ::first-letter::first-line::selection 偽元素,是否對 inline 元素增加屬性值皆失效?
  2. text-indent 屬性,只針對第一個段落的首行造成作用?
  3. white-spaceword-breakoverflow-wrap 使用差異? 不換行、換行與強制斷行關係為何? 又何謂避頭尾?
  4. 文本間距應為 Letter space < Word space < Line space

★ 追加命中率技能點數:

<p>{[]:){Porem ipsum dolor sit, amet consectetur adipisicing elit.</p>
<!-- 第一題:此為第一題文本設定。 -->
p::first-letter { font-size: 32px; }
/* 第一題:使用首字偽元素,文本受到字級尺寸影響範圍至? 原因為何? */
section { text-indent: ???; }
/* 第二題:透過何種單位,能正確縮進一個中文字? */
p { overflow-wrap: break-word; }
/* 第三題:CJK(中文/日文/韓文)與non-CJK語系有何差異? */
p { letter-spacing: 5px; line-height: 1; }
/* 第四題:文本字母間與行高屬性設定值是否合適? */

★ 使用傳送卷軸:


Layout

頁面整合是排印學設計的一部分,用於處理視覺元素的排列。涉及文本和圖像的整體佈局,盡可能確定介質的大小或形狀。同時需要感知力和創造力,並且符合希望傳達和強調的內容作為依據。

★ 副本關卡挑戰:

  1. line-heightline-boxleading 之間關係? 何謂無單位?
  2. vertical-align 屬性,相對於容器與相對於行的值,對齊方式為何?
  3. text-aligntext-align-last 互相關係?
  4. text-aligntext-justify 有何相同或差異?
  5. text-overflow 溢出行為所需條件為何?
  6. writing modetext-orientationdirection, unicode-bidi 書寫模式使用差異? 與不同語系有何關係?

★ 追加迴避率技能點數:

section { line-height: 0; } 
/* 第一題:文本單行與多行有何差異? 文字是否會消失? */
<p><span>line-height</span></p>
<!-- 第二題:此為第二題文本設定。 -->
p { line-height: 200px; } p span { font-size: 100px; } 
/* 第二題:文本行高為何? 與何有關? 如何調整最終結果為預期200px? */
section { text-align: justify; }
/* 第三題:多行文本,屬性值是否為合適選擇? 如需調整? */
section { text-align: none; text-justify: inter-word; }
/* 第四題:是否為有效值? 與 text-justify: inter-character 屬性值,有何差異? */
/* 註:因支援度等問題,此題測試結果需在 Firefox 瀏覽器進行實作。
p { width: 300px; text-overflow: ellipsis; }
/* 第五題:所缺條件為何? 又如何同時達到顯示多行,末行溢出行為呢?
section { text-orientation: sideways; }
/* 第六題:文本呈現為何失效? 如需直式書寫模式,中英混合文本又該如何設定?

★ 使用傳送卷軸:


Advanced

數碼類型在 20 世紀末成為主導形式。數碼字體將每個字符的圖像儲存為點陣字體中的位圖 (Bitmap),或者通過「輪廓字體」中的線和曲線的數學描述,也稱為向量字體。

★ 副本關卡挑戰:

  1. font properties 速記聲明中,強制值與可選值各為何?
  2. @font-face 屬性內,font-family 屬性值名稱,需與本地或外聯字體相同? 又如何分別設定中英文本內容字體?
  3. text-shadow 強制值與可選值各為何?
  4. SVG <text><tspan>,相對於 xy 軸坐標關係?
  5. SVG <path><textPath> 之間關係為何? 使用差異?

★ 追加防禦力技能點數:

body { font: italic 44px/50px bold, small-caption; }
/* 第一題:速記聲明中有何錯誤? */
p {
  @font-face { font-family: 'custom-Localfont'; src: local('Helvetica Neue'); }
}
/* 第二題:系統選用內建字型情況下,<p>元素內,是否能正確顯示字型? */
p { text-shadow: 1px red, 0 0 blue, 1px 4px 6px green; }
/* 第三題:陰影前後層順序為何? 是否為有效值? */
<text x="0" y="40" text-anchor="middle" fill="steelblue">SVG</text>
<!-- 第四題:是否能正確顯示? -->
<svg>
  <defs>
    <path id="circle" d="M60 20 a40 40 0 1 1 -1 0"></path>
  </defs>
  <text>
    <textPath xlink:href="#circle" startOffset="10%">
      Good........Ideas........Studio.............
    </textPath>
  </text>
  <use xlink:href="#circle" x="180"/>
</svg>
<!-- 第五題:有無使用<defs>元素,是否影響顯示效果? <use>元素特性為何? -->

★ 使用傳送卷軸:


Evolution

Unicode 標準沒有規定或創建任何字體,而圖形本身形狀的集合,稱為字形。抽象字符定義為一個特定的碼點,並限定取決於字形中使用的上下文形狀的所需變化。

★ 副本關卡挑戰:

  1. MIME types 目前所支持字型格式為何?
  2. font-display 三個時間週期為何? FOITFOUT 差異? font-synthesis 主要功能又為何?
  3. WebFontIconFont 選用時機點? 何謂空白的虛缺號

★ 追加魔法術技能點數:

@font-face {
  font-family: 'custom-webfont';
  src: local('localfont'),
       url('webfont.woff2') format('woff2'),
       url('webfont.woff') format('woff'),
       url('webfont.ttf') format('truetype');
/* 第一題:已從本地端描述系統字體,為何還需引入外聯字型? 重複引用優勢? */
@font-face {
  font-family: ExampleFont;
  src: url(/path/to/fonts/examplefont.woff) format('woff');
  font-display: swap;
}
/* 第二題:選用 font-display: swap; 有何優勢? */
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
/* 第三題:引用方式是否正確? 與其他方式有何差異? */

★ 使用傳送卷軸:


故事起源 鉄人28号 FX

初代・鐵人 28 號,金田正太郎 (主角) 從少年到中年一路伴隨的戰友,也是「新.鐵人計劃」的原型機。鐵人 28FX 集合全世界 27 部鐵人的精華,加上超電動系統製作而成、鐵人 28 的後繼機,號稱世上最強鐵人。頭頂高﹕20 米。總重量﹕25.8 噸。

鐵人計劃分為兩部份。

  • 111 號為第一期:
    屬於實驗性質,由於設計較早期,部份只會應用於建築工程上,只有少數以回歸戰鬥需要而開發。因此多屬大量生產型,而且格式一致。
  • 1228 號為第二期:
    世界各國在 11 號的基礎上,各自進行再開發的新式鐵人。絕大部份均為專用機、沒有量產化、以戰鬥為開發目的,其中 25 號「幻影」及 28FX,更裝備可以將鐵人性能大幅提升的「超電動迴路」,戰鬥力為眾多鐵人之最。

註:鐵人 29 號「黑牛」並非榊氏財團製作,為後來主角在接收時加上的編號。


角色選定:

故事劇情敘述每個機器人被創造,都有其功能特性,這與 CSS 每個屬性操作,完全相契合! 而 FX 原始含義為 future,那對於 font,是否也同樣存在未來可能性? 字體對於前端工程師又該扮演一個怎樣的角色? 或許透過鐵人賽文章,能找尋到答案!


致謝名單:

感謝好想工作室 Howard,給了我們所有機會。
感謝 chris,亦師亦友角色,讓我的人生有了些許不同。感謝我的好戰友 PenghuaRURUTsuifei,各為人生不同階段,卻有著共同目標一起互相打氣,極為窩心。感謝一同參與鐵人賽前端夥伴 AskieJinWenKiraMangoSuTitangeneYachen,帶給我始終滿滿的收穫。

感謝 Alex宅幹嘛CSScokejustfont六角學院胡立偷米騎巴哥等,無私分享。

感謝最愛的老婆與女兒,雖然左手寫著文,右手哄著女兒,讓我花費時間倍數,卻是地球上最浪漫的一件事。

。:.゚ヽ(*´∀`)ノ゚.:。
得謝各位,握手致謝。


[ 追加經驗值 ]
註:參考來源 横山光輝の世界
a letter shaping game
KERNTYPE a kerning game
Can't Unsee


上一篇
鉄人28号FX 鉄人29号「雲端蛇」WebFont, IconFont
系列文
鉄人28号FX30
1
Chris
iT邦新手 5 級 ‧ 2019-10-15 21:22:31

神作呀!三十天結局,終於看懂你在做什麼了!(故事依然看不懂)
。:.゚ヽ(*´∀`)ノ゚.:。

真的寫到懷疑人生!! 哈。由衷感謝 Chris 對我的提攜。

0
JinWen
iT邦新手 5 級 ‧ 2019-10-15 21:23:21

恭喜完賽,這系列真的是超實用冷知識,而且超有梗XD,感謝分享!是否該曬一波女兒照片(敲碗)~

Chris iT邦新手 5 級‧ 2019-10-15 21:31:45 檢舉

女兒照片(敲碗)~

Chris iT邦新手 5 級‧ 2019-10-15 21:32:25 檢舉

老婆照片(敲碗)~ (誤)

看來又要合成一波才行!! 哈哈

0
CSScoke
iT邦新手 4 級 ‧ 2019-10-15 21:30:34

恭喜完賽! 感謝推薦^^

感謝 Amos,金魚游啊游~~獲益良多。

0
huli
iT邦新手 5 級 ‧ 2019-10-15 21:35:32

恭喜完賽~

感謝 huli,跟著小明一起努力學習,真的很有趣。

0
RURU Tseng
iT邦新手 5 級 ‧ 2019-10-15 21:53:24

恭喜~~~~~結束啦~~~~~~~/images/emoticon/emoticon42.gif

感謝不間斷鞭策嫌棄劇情發展!! 疑? 哈!!

0
Titangene
iT邦新手 5 級 ‧ 2019-10-15 23:06:24

恭喜完賽!受益良多!對我來說是似懂非懂的劇情 XD

/images/emoticon/emoticon07.gif

終於可以討論其他話題 不用每天被追著跑~~

0
yachen
iT邦新手 5 級 ‧ 2019-10-15 23:08:32

很有深度的系列!!
恭喜完賽~~

我也要找時間好好來看你寫的文章 互相學習

0
Penghua
iT邦新手 5 級 ‧ 2019-10-16 09:39:51

恭喜完賽~要來追故事的進度了(誤

問我會不會比較快 哈哈

0
tsuifei
iT邦新手 5 級 ‧ 2019-10-16 11:37:10

哇~原來是這樣,不知是學習,也是一場記憶之旅,最後一天實在太精彩了!
一直很佩服蠟燭兩頭燒的無敵毅力,要留起來給小孩看喔~哈哈!

你的堅持,才是我該好好學習的,超讚

0
Howard
iT邦新手 5 級 ‧ 2019-10-16 21:49:48

賀完賽/images/emoticon/emoticon64.gif

感謝 Howard 一路相挺,棒棒

我要留言

立即登入留言