站務行政 - 關於KAM簡譜字型的網站應用建議

關於KAM簡譜字型的網站應用建議

內容來源: 吹鼓吹小站
論壇分區: 系統專區
論壇名稱: 站務行政
論壇描述: 新進會員請於此版發言自我介紹，待審核通過後才可以使用其他版面。
頁面鏈接: http://suona.com/forum/forum_posts.asp?TID=14186
列印日期: 2020 Mar 29 10:38am
軟件版本: Web Wiz Forums 10.18 - http://www.webwizforums.com

主題: 關於KAM簡譜字型的網站應用建議

發表人: Guest
主題: 關於KAM簡譜字型的網站應用建議
發表時間: 2010 Aug 19 10:44pm

您好~

我只是一個過客，因緣際會得知此論壇 http://suona.com/forum/forum_posts.asp?TID=3617 - 有專門對簡譜的輸入/檢視方面特殊字體支援。

最近不小心發現網頁 CSS 樣式設定部份，其實可以直接內嵌（Embedding）字體。

經過個人 http://www28.atwiki.jp/ooblkeland/pages/178.html - 實測透過ＩＥ、火狐、Chrome 瀏覽器測試都顯示良好。

個人用最老舊的 IE6 測試一樣有效果。

網頁內直接內嵌字型的好處是，不論對方電腦是否有安裝此字體。

瀏覽的時候都可以正常瀏覽到簡譜，對檢視方面應該會滿有幫助的。

雖然個人只是過客，不太清楚論壇內目前簡譜是否有大量應用到 KAM簡譜字體，

但如果有地方有用到的話，從網頁CSS上讓整個論壇都支援這種字型內嵌顯示，應該會滿方便的。

加上 KAM 簡譜字體檔案很小（11 KB），流量加載上不會造成太大的負擔。

個人覺得這方面是可行的，所以才來提出淺見。

如有冒犯之處還請多多包含。

回覆:

發表人: 百鳥朝鳳
發表時間: 2010 Aug 20 12:23am

上網查了一下，除了 Google Font API 之外，沒有找到有關於 Server 端提供字型所需的程式或者作法，您知道哪裡有嗎？

-------------
用力回應是一種美德

發表人: もう
發表時間: 2010 Aug 20 8:20am

您好，我是發帖的過客 LOL

未註冊不能回覆，所以我也註冊了XD

這部份實作是透過 CSS 來完成。

字體檔案直接放在可外連的各網站空間就可以了。

以論壇來說，就放在論壇下面的某個資料夾就可以了。不需要透過特殊伺服器處理。

假設您把 01SMN.ttf 上傳到 http://suona.com/forum/font/

字體網址變成 http://suona.com/forum/font/01SMN.ttf

那就可以這樣下去設置

<html><head>
<style type="text/css"> 

@font-face {
 font-family: "jianpu_font";　/*設定自訂＠字體名稱，可隨意*/
 src: url("http://suona.com/forum/font/01SMN.eot"); /* EOT file for IE */
}

@font-face {
 font-family: "jianpu_font"; /*設定自訂＠字體名稱，可隨意*/
 src: url("http://suona.com/forum/font/01SMN.ttf"); /* TTF file for CSS3 browsers */
}

.jianpu_font_body {
    font-family: "jianpu_font"; /*使用自訂＠字體，要對應上面的自訂名稱*/
    font-size: 36px; /*這控制字型顯示大小可有可無*/
}
</style> 
</head> 

<body>
<span class="jianpu_font_body">asdf zxcv ASDF ZXCV</span>
</body>
</html>

body 的部份 span 的 class 設定完，才能相對應讓簡譜字體顯示出來。

其實就相當於論壇文章內容讓字體設定成簡譜字體。

（如果論壇系統代碼有自訂功能，其實也可以自訂一個新標籤來搭配<span class="jianpu_font_body">使用。）

因為 head 部分的 css，

上半的 @font-face 已經定義字體的相關檔案自動讀取。

所以在網頁內只要使用「font-family: "jianpu_font"」這個被設定過的字體，

就能自動顯示，不論對方是否有安裝過該字體都可以正常顯示。

這方面不用透過特殊伺服器，因為這是透過瀏覽器處理 CSS 解析來達成，屬於在用戶端處理。

目前主流的瀏覽器包含 Firefox、Chrome、Safria、Opera 等瀏覽器都有支援，

IE 的部份則不能直接用 TTF 格式，要將字體轉換成 EOT 格式的字體檔案。

轉換方面，目前有 http://www.kirsle.net/wizards/ttf2eot.cgi - 線上轉換用網站， http://www.microsoft.com/typography/weft.mspx - 微軟也有官方免費轉換軟體。

也可以 http://code.google.com/p/ttf2eot/wiki/Demo - 透過命令提示字元（Command line）的方式去轉換成 EOT 檔案。

可參考 Note for Windows Users 的部份範例，轉換程式可從 http://code.google.com/p/ttf2eot/downloads/list - ttf2eot Windows Executable 取得。

這邊實測後 EOT 的效果也一樣好，在老舊的 IE6 一樣有效。（實測是用線上轉換的檔案）

考慮到說明方便，所以上面的 code 寫成整張網頁的形式。

實際上論壇的 CSS 也許是 http://suona.com/forum/css_styles/default/default_style.css - 藏在佈景裡面，可能論壇系統後台就可以設定。

或者可以直接去針對該 CSS 檔案，在內容最尾端作加入新的字體定義（@font-face）來達成。

body 的部份，就相當於會員輸入內文的部份。

這方面實作上可能要透過設定指定字體，或者搭配新定義的論壇代碼來達成。

CSS方面我主要是參考： http://www.minwt.com/?p=2094 - CSS教學－將字型嵌入(Embedding)到網頁中 | ♣梅問題‧教學網【Minwt】♣

國外網站參考： http://www.kirsle.net/blog.html?u=kirsle&id=55 - ☆ （這是 http://www.kirsle.net/wizards/ttf2eot.cgi - 線上轉換 TTF→EOT 工具網站的作者寫的）

目前我試出來的頁面是這邊： http://www28.atwiki.jp/ooblkeland/pages/178.html - ★

提供給您參考～

PS：

上述的 code 不管是檔名或定義的名稱，包含「.jianpu_font_body」，

都是可以自由設定的，只要相對應的部份做好都有效果。

不過這種模式它在讀取頁面時，會把整個字體都自動載下來，

所以不適合應用在檔案大小很大的中文字體。

針對簡譜這類特殊字體，因為檔案大小的關係效果反而比較好。

另外不好意思，因為好奇字型嵌入（Embedding）到網頁的效果，

這邊在實測的時候，擅自先將簡譜字體上傳到私用 Wiki 上測試，

如果不妥的話我會馬上拿下來的，還請多多包含 Smile

除了KAM簡譜字型， http://suona.com/forum/forum_posts.asp?TID=14028 - 製作簡譜_JPKBD/JPQS 裡面的簡譜字型一樣有效。

其實我在想如果實現不安裝字體也可以瀏覽的功能，也許還可以進階應用生出網頁版的編輯器XD？

只要讓按鈕上面也套用字型顯示，應該就可以實現了（？）

發表人: MidiXiaoA
發表時間: 2010 Aug 20 8:33pm

もう發表的內容:

除了KAM簡譜字型， http://suona.com/forum/forum_posts.asp?TID=14028 - 製作簡譜_JPKBD/JPQS 裡面的簡譜字型一樣有效。

感謝熱心過客, 提供好康訊息, 這個偶喜歡,

,偶也考慮加到主機速速看, 感恩分享 Orz !!

(( 簡譜字型 1231-SMN.TTF 無償分享 ))

-------------
一步一腳印一枝草一點露福莫盡享行善助人但問赤子心

發表人: kam
發表時間: 2010 Sep 02 12:56am

Hi! もう, 我是KAM簡譜字型的作者。這個字型當初是一時心血來潮參考大陸的「彩虹簡譜字型」(不知有沒有記錯？)而成。那時的想法是為了解決在討論區方便大家顯示簡譜譜例的，不過沒有什麼人用，與方便否或能否用沒有太大關係。無論如何還是感謝您熱心提供的方法及程式分享。

發表人: 孫心裁
發表時間: 2010 Sep 02 10:16am

>那時的想法

>是為了解決在討論區

>方便大家顯示簡譜譜例的，

>不過沒有什麼人用，

>與方便否

>或能否用

>沒有太大關係。

梁老師

要用Word抄簡譜

其實很簡單也很理想

只有設計字型較繁索無趣而已

若有現成的字型

(您的字型且有此優點)

則之所以沒有什麼人用，

與是否方便?

應是有很大關係的!

我可能已猜到(不甚方便)原因

若真是此原因

則只要稍作修改

就可臻完備了

故我極有興趣加以研究

您以前有傳程式及說明給我

慚愧沒有細加研究

目前有找到且下載了

是015MN.ttf麼

但執行後

只見到三個音符耶

是否還須下載多個檔?

請問何處可找到使用說明麼?

發表人: kam
發表時間: 2010 Sep 02 10:36am

>目前有找到且下載了
>是015MN.ttf麼
>但執行後
>只見到三個音符耶
>是否還須下載多個檔?
它是一個ｗindows TrueType 半形字型檔
不是執行它，而是在「控制台」的「字型」中安裝
可以在Word，Encore ......等
只要能夠顯示　TrueType 字型的程式都可以用，
還有高文亮先生提供的專為本字型設計的輸入介面：
http://suona.com/sscore/kam/input1.0.exe

>請問何處可找到使用說明
http://suona.com/sscore/kam/readme.htm

歡迎提供研究心得，期待指教，造福簡譜愛用者。

發表人: MidiXiaoA
發表時間: 2010 Oct 22 3:52pm

もう 2010-08-19 22:44 發表的內容:

您好~
我只是一個過客，因緣際會得知此論壇有專門對簡譜的輸入/檢視方面特殊字體支援。

最近不小心發現網頁 CSS 樣式設定部份，其實可以直接內嵌（Embedding）字體。
經過個人實測透過ＩＥ、火狐、Chrome 瀏覽器測試都顯示良好。
個人用最老舊的 IE6 測試一樣有效果。

網頁內直接內嵌字型的好處是，不論對方電腦是否有安裝此字體。
瀏覽的時候都可以正常瀏覽到簡譜，對檢視方面應該會滿有幫助的。
.....

請教もう : 經在下實測, 即便用您提供的測試頁面, 在{火狐}亦是無法正常顯示, 可有改善方案? 或者{火狐}用戶端有需要額外的設定? 相對在 IE、Chrome 皆可正常顯示!

驗測網址 => http://www28.atwiki.jp/ooblkeland/pages/178.html - http://www28.atwiki.jp/ooblkeland/pages/178.html

以下是我的驗測頁面硬拷(HardCopy)

@ IE v8.0 :

@ FireFox v3.6 :

@ Google Chrome v6.0 :

-------------
一步一腳印一枝草一點露福莫盡享行善助人但問赤子心

發表人: CHIANG
發表時間: 2010 Oct 22 5:47pm

我也碰過某些軟體不能辨識使用彩虹、 KAM 、MidiXiaoA ...這類不占位字體的。

江振興台中 20101022 17 : 35

-------------
．╭═══╮
╭ 振興箏院|.oｏO CHIANG TAIWAN
╰⊙====⊙╯古箏教學、樂譜制作台中 04-22417995

發表人: もう
發表時間: 2011 Nov 02 10:22am

MidiXiaoA 發表的內容:

請教もう : 經在下實測, 即便用您提供的測試頁面, 在{火狐}亦是無法正常顯示, 可有改善方案? 或者{火狐}用戶端有需要額外的設定? 相對在 IE、Chrome 皆可正常顯示!

驗測網址 => http://www28.atwiki.jp/ooblkeland/pages/178.html - http://www28.atwiki.jp/ooblkeland/pages/178.html

抱歉，之前人間蒸發(?)

所以現在才回文。

那可能是瀏覽器支援度的問題，

~~火狐3.6我記得我有測過應該可以說，也許是某些特殊問題？~~

我查了一下，發現問題了。

Ver 3.6 會不能的原因是因為，

我給的測試內容的CSS與字型檔案是分別在不同網站下。

3.6 版還不允許跨網域解析CSS3的@font-face，到4.0才可以。

我目前試過 4.0 以上的都可以。

不過也太久沒來關心這串，目前火狐最新穩定版都已經7.0.1了，差不多可以算完全支援了吧？

因為這方面屬於CSS3的@font-face技術應用，在當時算比較新的用法，導致各家瀏覽器支援度不一。

才會導致出現樓上那種無法解晰的情形。

目前應該有改善了，因為支援HTML5跟CSS3的瀏覽器都更新比較多次了。

不過還是附註一下，

這串提到的用法，會受限於瀏覽者使用的瀏覽器解析能力。

某些過去比較非主流的舊型瀏覽器(比方說Firefox2?)，他可能就沒辦法支援。

至於哪些瀏覽器、哪些版本以上才支援哪種字體格式，

可以參考： http://www.fontspring.com/fontface - http://www.fontspring.com/fontface

直接看「Browser Font Support」的表格就可以了。

另外，上面也提到這段時間當中，各家瀏覽器已對 @font-face 支援的程度提高。

目前還有更新的寫法，可以對應到更多種瀏覽器。

（不過一開始提的那種寫法就很夠用了，以下列出來的是比較吹毛求疵的安全形寫法。）

@font-face {	font-family: 'MyWebFont';
	src: url('webfont.eot'); /* IE9 Compat Modes */
	src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	     url('webfont.woff') format('woff'), /* Modern Browsers */
	     url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
	     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
	}

出處： http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax - http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax

這種寫法裡面多照顧到其他類型的瀏覽器，但也要多用幾種對應用的字型檔案類型。

基本上只要有其中一種（例如 *.ttf），就可以想辦法轉換了。
透過 http://www.fontsquirrel.com/fontface/generator - @FONT-FACE GENERATOR 就可以直接從線上操作轉換。

再補充一下，CSS裡面最好優先把ＩＥ的部分放在最前面。
因為寫在前面的檔案他會優先處理。
這樣可以預防IE開的時候全都亂讀到不合的檔案，網頁跑半天最後才讀到適合的。

發表人: MidiXiaoA
發表時間: 2011 Nov 04 11:49pm

もう發表的內容:

抱歉，之前人間蒸發(?)
所以現在才回文。

那可能是瀏覽器支援度的問題，
火狐3.6我記得我有測過應該可以說，也許是某些特殊問題？

.....

謝謝您的關心解惑, 雖然已忙完也過了, 還是深表萬分感恩!

目前在本站發文已可直接打出簡譜字符, 正是延用您的建議, 造福會員&網友;

-------------
一步一腳印一枝草一點露福莫盡享行善助人但問赤子心