★ 地圖異次元空間 ↓↓↓

顯示勇者試煉塔位置圖

歡迎來到 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，兩者間有何差異？ */

★ 使用傳送卷軸：

• 鉄人28号FX 鉄人1号「行內熊」inline element
• 鉄人28号FX 鉄人2号「文本士」content area
• 鉄人28号FX 鉄人3号「置換象」replaced elements
• 鉄人28号FX 鉄人4号「字戰隊」font-family
• 鉄人28号FX 鉄人5号「功能獸」Display vs Text typeface

Character

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

★ 副本關卡挑戰：

1. font-size 絕對單位與相對單位參考依據為何？ 何謂視口相對單位？
2. font-weight 設定值什麼情況會失效？ bolder 與 lighter 分別？
3. currentColor，opacity，transparent 使用方式？
4. 字體 baseline 高度同等於 text-decoration: underline？ underline 值高度又同等於字體 descender line？
5. font-style屬性值 italic 同等於 oblique？ oblique 又同等於偽斜體？
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; } 
/* 第六題：與正統小型大寫字母有何差異？ */

★ 使用傳送卷軸：

• 鉄人28号FX 鉄人6号「字級羊」font-size
• 鉄人28号FX 鉄人7号「字重牛」font-weight
• 鉄人28号FX 鉄人8号「色域石」color
• 鉄人28号FX 鉄人9号「修飾蝠」text-decoration
• 鉄人28号FX 鉄人10号「幻影狐」font-style
• 鉄人28号FX 鉄人11号「變體蟲」font-variant

Word

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

★ 副本關卡挑戰：

1. ::first-letter，::first-line，::selection 偽元素，是否對 inline 元素增加屬性值皆失效？
2. text-indent 屬性，只針對第一個段落的首行造成作用？
3. white-space，word-break，overflow-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; }
/* 第四題：文本字母間與行高屬性設定值是否合適？ */

★ 使用傳送卷軸：

• 鉄人28号FX 鉄人12号「匿名劍」::first-letter, ::first-line, ::selection
• 鉄人28号FX 鉄人13号「縮進盾」text-indent
• 鉄人28号FX 鉄人14号「空白彈」white-space, word-break, overflow-wrap
• 鉄人28号FX 鉄人15号「間距蟻」letter-spacing, word-spacing, line-height

Layout

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

★ 副本關卡挑戰：

1. line-height，line-box 與 leading 之間關係？ 何謂無單位？
2. vertical-align 屬性，相對於容器與相對於行的值，對齊方式為何？
3. text-align 與 text-align-last 互相關係？
4. text-align 與 text-justify 有何相同或差異？
5. text-overflow 溢出行為所需條件為何？
6. writing mode，text-orientation，direction, 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; }
/* 第六題：文本呈現為何失效？ 如需直式書寫模式，中英混合文本又該如何設定？

★ 使用傳送卷軸：

• 鉄人28号FX 鉄人16号「行高怪」line-height
• 鉄人28号FX 鉄人17号「垂直虎」vertical-align
• 鉄人28号FX 鉄人18号「左右蛙」text-align, text-align-last
• 鉄人28号FX 鉄人19号「字間蜂」text-justify
• 鉄人28号FX 鉄人20号「省略蚊」text-overflow
• 鉄人28号FX 鉄人21号「書寫龜」writing mode, text-orientation, direction, unicode-bidi

Advanced

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

★ 副本關卡挑戰：

1. font properties 速記聲明中，強制值與可選值各為何？
2. @font-face 屬性內，font-family 屬性值名稱，需與本地或外聯字體相同？ 又如何分別設定中英文本內容字體？
3. text-shadow 強制值與可選值各為何？
4. SVG <text> 與 <tspan>，相對於 x 與 y 軸坐標關係？
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>元素特性為何？ -->

★ 使用傳送卷軸：

• 鉄人28号FX 鉄人22号「速記豹」font properties
• 鉄人28号FX 鉄人23号「字臉獅」@font-face
• 鉄人28号FX 鉄人24号「影隨者」text-shadow
• 鉄人28号FX 鉄人25号「圖形鹿」SVG <text> <tspan>
• 鉄人28号FX 鉄人26号「路徑鳥」SVG <path> <textPath> <defs>

Evolution

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

★ 副本關卡挑戰：

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

★ 追加魔法術技能點數：

@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 鉄人27号「格式鬼」font formats
• 鉄人28号FX 鉄人28号「渲染俠」font-display, font-synthesis
• 鉄人28号FX 鉄人29号「雲端蛇」WebFont, IconFont

故事起源 鉄人28号 FX

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

鐵人計劃分為兩部份。

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

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

角色選定：

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

致謝名單：

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

感謝 Alex宅幹嘛、CSScoke、justfont、六角學院、胡立和偷米騎巴哥等，無私分享。

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

｡:.ﾟヽ(*´∀`)ﾉﾟ.:｡
得謝各位，握手致謝。

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