列印本頁 | Close Window

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

內容來源: 吹鼓吹小站
論壇分區: 系統專區
論壇名稱: 站務行政
論壇描述: 新進會員請於此版發言自我介紹,待審核通過後才可以使用其他版面。
頁面鏈接: http://suona.com/forum/forum_posts.asp?TID=14186
列印日期: 2019 Dec 10 11:28pm
軟件版本: 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 - 實測 透過IE、火狐、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 檔案。










發表人: 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麼
>但執行後
>只見到三個音符耶
>是否還須下載多個檔?
它是一個windows 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もう 2010-08-19 22:44 發表的內容:

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

最近不小心發現網頁 CSS 樣式設定部份,其實可以直接內嵌(Embedding)字體。
經過個人實測透過IE、火狐、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

-------------
.╭灨
╭ 振興箏院|.ooO CHIANG TAIWAN
╰☉====☉╯古箏教學、樂譜制作 台中 04-22417995


發表人: もう
發表時間: 2011 Nov 02  10:22am
發起人 MidiXiaoA 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的部分放在最前面。
因為寫在前面的檔案他會優先處理。
這樣可以預防IE開的時候全都亂讀到不合的檔案,網頁跑半天最後才讀到適合的。



發表人: MidiXiaoA
發表時間: 2011 Nov 04  11:49pm
發起人 もう もう 發表的內容:

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

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

.....


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

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

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



列印本頁 | Close Window

Forum Software by Web Wiz Forums® version 10.18 - http://www.webwizforums.com
Copyright ©2001-2014 Web Wiz Ltd. - http://www.webwiz.co.uk