<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/">
    <channel>
        <title>[講義] Google Fonts 網路中文字型應用</title>
        <description>1. Google Fonts 網路中文字型2. 使用Google fonts黑體（思源黑體）3. 使用Google fonts圓體字型4. 使用Google fonts仿宋字型5. 上課影音1. Google Fonts 網路中文字型
Google Fonts https://fonts.google.com/earlyaccess
開啟 Google Fonts: Early Access 頁面，找到 Noto Sans TC（Chinese Traditional），就能看到網站提供的程式碼，使用方法很簡單，只要把 Google Fonts 提供的那段 CSS 程式碼放入網站的 ，或style.css檔案中，修改 CSS 來加入「Noto Sans TC」就能載入網頁字型。



Google fonts：Noto Sans TC (Chinese Traditional) 黑體（思源黑體）

@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
font-family:&quot;Noto Sans TC&quot;, sans-serif;








3. 使用Google fonts圓體字型
Google fonts：cwTeXYen (Chinese Traditional) 圓體字型

@import url(https://fonts.googleapis.com/earlyaccess/cwtexyen.css);
font-family: &quot;cwTeXYen&quot;, sans-serif;










4. 使用Google fonts仿宋字型
Google fonts：cwTeXFangSong (Chinese Traditional) 仿宋體字型

@import url(https://fonts.googleapis.com/earlyaccess/cwtexfangsong.css);
font-family: &quot;cwTeXFangSong&quot;, serif;





5. 上課影音
https://youtu.be/yAWYTy3DJL8
</description>
        <link>http://mepopedia.com/forum/read.php?804,90222,90222#msg-90222</link>
        <lastBuildDate>Sat, 27 Jun 2026 22:37:35 +0800</lastBuildDate>
        <generator>Phorum 5.2.7</generator>
        <item>
            <guid>http://mepopedia.com/forum/read.php?804,90222,90222#msg-90222</guid>
            <title>[講義] Google Fonts 網路中文字型應用</title>
            <link>http://mepopedia.com/forum/read.php?804,90222,90222#msg-90222</link>
            <description><![CDATA[<div class='message-body' style='float:right; margin: 0; border: none; padding: 0 0 1em 1em; max-width: 216px'><div class='notice' style='padding: 10px 14px'><ol style='font-size: 0.8em; margin:0; padding: 0; list-style-type: none;'><li><a style='text-decoration:none' href=#Google+Fonts+.E7.B6.B2.E8.B7.AF.E4.B8.AD.E6.96.87.E5.AD.97.E5.9E.8B>1. Google Fonts 網路中文字型</a><li><a style='text-decoration:none' href=#.E4.BD.BF.E7.94.A8Google+fonts.E9.BB.91.E9.AB.94.EF.BC.88.E6.80.9D.E6.BA.90.E9.BB.91.E9.AB.94.EF.BC.89>2. 使用Google fonts黑體（思源黑體）</a><li><a style='text-decoration:none' href=#.E4.BD.BF.E7.94.A8Google+fonts.E5.9C.93.E9.AB.94.E5.AD.97.E5.9E.8B>3. 使用Google fonts圓體字型</a><li><a style='text-decoration:none' href=#.E4.BD.BF.E7.94.A8Google+fonts.E4.BB.BF.E5.AE.8B.E5.AD.97.E5.9E.8B>4. 使用Google fonts仿宋字型</a><li><a style='text-decoration:none' href=#.E4.B8.8A.E8.AA.B2.E5.BD.B1.E9.9F.B3>5. 上課影音</a></ol></div></div><h2 id='Google+Fonts+.E7.B6.B2.E8.B7.AF.E4.B8.AD.E6.96.87.E5.AD.97.E5.9E.8B'>1. Google Fonts 網路中文字型</h2><br />
Google Fonts <a href="https://fonts.google.com"  target="_blank'><b>https://fonts.google.com</b></a><br />
Google 推出 5 款免費的中文網頁字型<br />
1. cwTeXKai (Chinese Traditional) 楷體字體<br />
@import url(https://fonts.googleapis.com/earlyaccess/cwtexkai.css);<br />
font-family: "cwTeXKai", serif;<br />
2. cwTeXYen (Chinese Traditional) 圓體字體<br />
3. cwTeXFangSong (Chinese Traditional) 仿宋體字體<br />
4. Noto Sans TC (Chinese Traditional) 黑體字體（思源黑體）<br />
5. cwTeXMing (Chinese Traditional) 明體字體<br />
<br />
不過，目前在  Google Fonts 網站上還找不到這 5 個字體 ，因為這 5 個字型目前是被放到 Google Fonts Early Access （測試版）的地方。<br />
下載網址：<a href="https://fonts.google.com/earlyaccess"  target="_blank'><b>https://fonts.google.com/earlyaccess</b></a><br />
目前可以正常的在網頁上使用這些新的中文網路字型。<br />
以下我們就為大家介紹如何使用這些 Google 推出的新的中文網路字型。<br />
<br />
<h2 id='.E4.BD.BF.E7.94.A8Google+fonts.E9.BB.91.E9.AB.94.EF.BC.88.E6.80.9D.E6.BA.90.E9.BB.91.E9.AB.94.EF.BC.89'>2. 使用Google fonts黑體（思源黑體）</h2><br />
思源黑體是 Adobe 和 Google 共同開發的開放原始碼字型，發佈時就已支援繁體中文、簡體中文、日文及韓文，因此深受許多使用者喜愛。<br />
Google Fonts 本身不會對流量或次數額度有所限制，且無須註冊或下載檔案，只要依照服務提供的字型 CSS 程式碼，套入自己的網站後稍作調整即可使用，非常簡單！<br />
<br />
網站名稱：Google Fonts: Early Access<br />
網站鏈結：<a href="https://fonts.google.com/earlyaccess"  target="_blank'><b>https://fonts.google.com/earlyaccess</b></a><br />
開啟 Google Fonts: Early Access 頁面，找到 Noto Sans TC（Chinese Traditional），就能看到網站提供的程式碼，使用方法很簡單，只要把 Google Fonts 提供的那段 CSS 程式碼放入網站的 <head>，或style.css檔案中，修改 CSS 來加入「Noto Sans TC」就能載入網頁字型。<br />
<br />
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-5-01.png" border="0"><br />
<hr><br />
<b>Google fonts：Noto Sans TC (Chinese Traditional) 黑體（思源黑體）</b><br />
<br />
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);<br />
font-family:"Noto Sans TC", sans-serif;<br />
<br />
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-5-02.png" border="0"><br />
<hr><br />
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-5-03.png" border="0"><br />
<hr><br />
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-5-04.png" border="0"><br />
<hr><br />
<br />
<h2 id='.E4.BD.BF.E7.94.A8Google+fonts.E5.9C.93.E9.AB.94.E5.AD.97.E5.9E.8B'>3. 使用Google fonts圓體字型</h2><br />
<b>Google fonts：cwTeXYen (Chinese Traditional) 圓體字型</b><br />
<br />
@import url(https://fonts.googleapis.com/earlyaccess/cwtexyen.css);<br />
font-family: "cwTeXYen", sans-serif;<br />
<br />
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-5-05.png" border="0"><br />
<hr><br />
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-5-06.png" border="0"><br />
<hr><br />
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-5-07.png" border="0"><br />
<hr><br />
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-5-08.png" border="0"><br />
<hr><br />
<br />
<h2 id='.E4.BD.BF.E7.94.A8Google+fonts.E4.BB.BF.E5.AE.8B.E5.AD.97.E5.9E.8B'>4. 使用Google fonts仿宋字型</h2><br />
<b>Google fonts：cwTeXFangSong (Chinese Traditional) 仿宋體字型</b><br />
<br />
@import url(https://fonts.googleapis.com/earlyaccess/cwtexfangsong.css);<br />
font-family: "cwTeXFangSong", serif;<br />
<br />
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-5-09.png" border="0"><br />
<hr><br />
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-5-10.png" border="0"><br />
<hr><br />
<h2 id='.E4.B8.8A.E8.AA.B2.E5.BD.B1.E9.9F.B3'>5. 上課影音</h2><br />
https://youtu.be/yAWYTy3DJL8<br />
<iframe width="800" height="440" src="https://www.youtube.com/embed/yAWYTy3DJL8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>]]></description>
            <dc:creator>JinJin</dc:creator>
            <category>網頁設計與語法（HTML/CSS）</category>
            <pubDate>Tue, 10 Dec 2019 21:15:38 +0800</pubDate>
        </item>
    </channel>
</rss>
