鉄人28号FX 鉄人29号「雲端蛇」

--- title: 鉄人28号FX 鉄人29号「雲端蛇」 tags: race, font, WebFont, IconFont description: --- ★ 地圖雷奧鎮山神廟 ↓↓↓ **顯示雷奧鎮廟口位置圖** 請問？您就是？ ( ~~找你半個月。很會躲是不是！~~) **雷奧鎮廟口 [鎮長]**：你終於順利走到這，在這趟漫漫旅程中，獲得能力者各種幫助。雖然只是個開端，但總有了方向。 --- ★★★ 關卡條件 ↓↓↓ ### 雲端字型 (WebFont, IconFont) 通過 [Wappalyzer](https://web.archive.org/web/20150318200652/https://wappalyzer.com/categories/font-scripts) 網站分析，圖示顯示目前字體類別中全球市佔率。 ![Wappalyzer](https://i.imgur.com/qoLEOoy.png =500x) --- **雷奧鎮廟口 [雲端蛇]**：如果說我能看的更遠一些，那是因為我站在巨人的肩膀上。 *痾！沒事。請繼續。* #### [Google fonts](https://fonts.google.com/) 由 [Google](http://googlecode.blogspot.com/2010/05/introducing-google-font-api-google-font.html) 的一群設計師，作家和開發人員領導的合作成果。目標是通過提供直觀，強大的開放源代碼 `Web` 字體集合來簡化該過程。無論您身在何處，都可以共享排版並將其集成到任何設計項目中。 >Typography “exists to honor content,” and when it’s done well it “reveals every element, every relationship between elements, and every logical nuance of the text.” —— [Robert Bringhurst](https://www.thecanadianencyclopedia.ca/en/article/robert-bringhurst) 線上提供[選擇 Web Fonts：入門指南](https://design.google/library/choosing-web-fonts-beginners-guide/) (執行項目、文本字數量、標題、內文或語系等)，透過分步指導找到合適的字體，或參考[總字體瀏覽量](https://fonts.google.com/analytics)作為選擇依據。 ( 註圖片來源：[Google design](https://design.google/library/choosing-web-fonts-beginners-guide/) ) ![Google design](https://storage.googleapis.com/gd-wagtail-prod-assets/images/TYPESELECTION_HERO_EXPORT_v.max-4000x2000.jpegquality-90.png) ```htmlmixed= <head><link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet"></head> ``` ```css= body { font-family: 'Open Sans', sans-serif; } ``` --- #### [Google Noto Fonts](https://www.google.com/get/noto/) 思源黑體一詞來自於成語「飲水思源」，是由 `Adobe` 與 `Google` 所領導開發的開源字型家族 (2014.7 發布)，支援 `CJK` (中文 / 日文 / 韓文) 等。為當時涵蓋字元數量最多的字型，此為 `OpenType` 字型技術的極限。思源黑體的開發以 `Adobe` 的[西塚涼子](https://fonts.adobe.com/designers/ryoko-nishizuka)為中心，西文及數字採自 `Source Sans Pro` 字型，漢字部分則分別以各語種為基礎，其字形皆依循各國國家標準。包含 `65,535` 字，共 `7` 種字重：`ExtraLight`(250)、`Light`(300)、`Normal`(350)、`Regular`(400)、`Medium`(500)、`Bold`(700)、`Heavy`(900)。 `Google` 將此字型另起名為 `Noto Sans CJK` 釋出，僅是字型和字重的稱呼不一樣而已。「Noto」一詞源自於「No more tofu」。當電腦無法顯示的字型，會出現空白的虛缺號`「□」`，這些方格又稱為「豆腐」。其目的就是要消滅這些豆腐，這表示在 `Unicode` 內排版時不會再出現空白字符。接續發布[思源宋體 Source Han Serif](https://source.typekit.com/source-han-serif/tw/#story)，也就是思源黑體的有襯線對應字體。 ![Source Han Serif](https://i.imgur.com/5ydbiWq.png) --- #### [Font Awesome](https://fontawesome.com/) 基於 `CSS` 和 `LESS` 的字體和圖標工具包。它由 [Dave Gandy](http://davegandy.github.io/) 製作，用於 `Twitter Bootstrap`，後來被整合到 [BootstrapCDN](https://getbootstrap.com/) 中。可在網站上獲取向量圖標和社交標誌。[[範例參考]](https://codepen.io/letterliu/pen/XWWXEJa) ```htmlmixed=  <head><link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.11.1/css/all.css"></head> <body><i class="fas fa-thumbs-up fa-5x"></i></body> ``` --- **雷奧鎮廟口 [雲端蛇]**：或許情況總是超乎預期，條件極為嚴苛下，必要時，就需做出不同抉擇。 **主要 `web` 字型容器格式有四種：`EOT`、`TTF`、`WOFF` 和 `WOFF2`。** - `EOT` 格式僅 `IE` 支援。 - `TTF` 格式具有部分 `IE` 支援。 - `WOFF 1.0` 格式的支援最廣泛，留意在許多較舊的瀏覽器中無支援。 - `WOFF 2.0` 格式支援對於許多瀏覽器來說還未實現。不過，無論選擇的範圍多廣泛，都找不到在所有瀏覽器上，單一通用格式，這表示我們需要交付多種格式才能提供一致的體驗： - 將 `EOT` 格式提供給舊版 `IE` (IE9 版以下) 瀏覽器。 - 將 `TTF` 格式提供給舊版 `Android` (4.4 版以下) 瀏覽器。 - 將 `WOFF 1.0` 格式提供給大多數瀏覽器。 - 將 `WOFF 2.0` 格式提供給支援的瀏覽器。註：就技術方面來說，還有 `SVG` 字型容器，但目前大都尚未實現。以上列點隨著瀏覽器演進，支援度有所差異。 --- - [w3.org Requirements for Chinese Text Layout](https://www.w3.org/TR/clreq/) 明確描述中文排版之需求與問題，另一方面也提出與既有標準 (例 Unicode) 的對應，提供更有效地促進實作。 - [justfont](https://www.justfont.com/) 提供中文雲端字型服務。[justfont blog](https://blog.justfont.com/) 提供字體領域相關學術文章，含金量極高。 - [caniuse](https://caniuse.com/) `Web` 技術的瀏覽器支援表。創建和維護由 [@Fyrd](https://twitter.com/Fyrd)，設計由 [@Lensco](https://twitter.com/Lensco)。 - [CSS fonts](https://www.cssfontstack.com/) 查看 `Microsoft Windows` 和 `macOS` 系統內建字體相容性。 --- **雷奧鎮廟口 [鎮長]**： **由衷感謝你的一切，為「排印」世界帶來些許不同。** 最後！隨時準備好，就闖關去吧！ **突破極限，勇者試煉塔。** *：什麼！！還來啊？？* --- [ 追加經驗值 ] 註：參考來源 [Google fonts](https://fonts.google.com/about) [Sandoll Communications](http://www.sandoll.co.kr/) [Iwata Corporation](http://www.iwatafont.com/en/) [Wappalyzer: Global market share of Font Script technologies](https://web.archive.org/web/20150318200652/https://wappalyzer.com/categories/font-scripts)

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.