吹鼓吹小站 主頁
論壇首頁 論壇首頁 > 系統專區 > 站務行政
  最近新文章 最近新文章 RSS - 關於KAM簡譜字型的網站應用建議
  幫助 幫助  搜索論壇   註冊 註冊  登錄 登錄

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

 發表回覆 發表回覆 頁  12>
發表人
內容
  主題 搜索 主題 搜索  主題功能 主題功能
もう 顯示下拉菜單
Admin Group
Admin Group
文章功能 文章功能   引用 もう引用  發表回覆回覆 點擊鏈接返回原帖 主題: 關於KAM簡譜字型的網站應用建議
    發表:  2010 Aug 19 10:44pm
您好~
我只是一個過客,因緣際會得知此論壇有專門對簡譜的輸入/檢視方面特殊字體支援

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

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

雖然個人只是過客,不太清楚論壇內目前簡譜是否有大量應用到 KAM簡譜字體,
但如果有地方有用到的話,從網頁CSS上讓整個論壇都支援這種字型內嵌顯示,應該會滿方便的。

加上 KAM 簡譜字體檔案很小(11 KB),流量加載上不會造成太大的負擔。
個人覺得這方面是可行的,所以才來提出淺見。
如有冒犯之處還請多多包含。

返回頂部
百鳥朝鳳 顯示下拉菜單
Admin Group
Admin Group
頭像

註冊時間: 2000 Aug 15
狀態: 離線
積分: 5067
文章功能 文章功能   引用 百鳥朝鳳 引用  發表回覆回覆 點擊鏈接返回原帖 發表:  2010 Aug 20 12:23am
上網查了一下,除了 Google Font API 之外,沒有找到有關於 Server 端提供字型所需的程式或者作法,您知道哪裡有嗎?
用力回應是一種美德
返回頂部
もう 顯示下拉菜單
新進會員
新進會員


註冊時間: 2010 Aug 20
狀態: 離線
積分: 2
文章功能 文章功能   引用 もう 引用  發表回覆回覆 點擊鏈接返回原帖 發表:  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 格式的字體檔案。
也可以透過命令提示字元(Command line)的方式去轉換成 EOT 檔案。
這邊實測後 EOT 的效果也一樣好,在老舊的 IE6 一樣有效。(實測是用線上轉換的檔案)

考慮到說明方便,所以上面的 code 寫成整張網頁的形式。
實際上論壇的 CSS 也許是藏在佈景裡面,可能論壇系統後台就可以設定。
或者可以直接去針對該 CSS 檔案,在內容最尾端作加入新的字體定義(@font-face)來達成。

body 的部份,就相當於會員輸入內文的部份。
這方面實作上可能要透過設定指定字體,或者搭配新定義的論壇代碼來達成。

國外網站參考:(這是線上轉換 TTF→EOT 工具網站的作者寫的)
目前我試出來的頁面是這邊:

提供給您參考∼

PS:
上述的 code 不管是檔名或定義的名稱,包含「.jianpu_font_body」,
都是可以自由設定的,只要相對應的部份做好都有效果。
不過這種模式它在讀取頁面時,會把整個字體都自動載下來,
所以不適合應用在檔案大小很大的中文字體。
針對簡譜這類特殊字體,因為檔案大小的關係效果反而比較好。

另外不好意思,因為好奇字型嵌入(Embedding)到網頁的效果,
這邊在實測的時候,擅自先將簡譜字體上傳到私用 Wiki 上測試,
如果不妥的話我會馬上拿下來的,還請多多包含Smile

+
除了KAM簡譜字型,製作簡譜_JPKBD/JPQS 裡面的簡譜字型一樣有效。
其實我在想如果實現不安裝字體也可以瀏覽的功能,也許還可以進階應用生出網頁版的編輯器XD?
只要讓按鈕上面也套用字型顯示,應該就可以實現了(?)

返回頂部
MidiXiaoA 顯示下拉菜單
中級會員
中級會員
頭像

註冊時間: 2008 Sep 02
狀態: 離線
積分: 222
文章功能 文章功能   引用 MidiXiaoA 引用  發表回覆回覆 點擊鏈接返回原帖 發表:  2010 Aug 20 8:33pm
發起人 もう もう 發表的內容:

除了KAM簡譜字型,製作簡譜_JPKBD/JPQS 裡面的簡譜字型一樣有效。

感謝熱心過客, 提供好康訊息, 這個偶喜歡, ,偶也考慮加到主機速速看, 感恩分享 Orz !!

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

一步一腳印 一枝草一點露 福莫盡享 行善助人但問赤子心
返回頂部
kam 顯示下拉菜單
高級會員
高級會員


註冊時間: 2000 Sep 16
狀態: 離線
積分: 669
文章功能 文章功能   引用 kam 引用  發表回覆回覆 點擊鏈接返回原帖 發表:  2010 Sep 02 12:56am
Hi! もう, 我是KAM簡譜字型的作者。這個字型當初是一時心血來潮參考大陸的「彩虹簡譜字型」(不知有沒有記錯?)而成。那時的想法是為了解決在討論區方便大家顯示簡譜譜例的,不過沒有什麼人用,與方便否或能否用沒有太大關係。無論如何還是感謝您熱心提供的方法及程式分享。
返回頂部
孫心裁 顯示下拉菜單
特級會員
特級會員
頭像

註冊時間: 2000 Aug 21
狀態: 離線
積分: 9727
文章功能 文章功能   引用 孫心裁 引用  發表回覆回覆 點擊鏈接返回原帖 發表:  2010 Sep 02 10:16am
>那時的想法
>是為了解決在討論區
>方便大家顯示簡譜譜例的,
>不過沒有什麼人用,
>與方便否
>或能否用
>沒有太大關係。
 
梁老師 
 
要用Word抄簡譜
其實很簡單也很理想
只有設計字型較繁索無趣而已
 
若有現成的字型
(您的字型且有此優點)
則之所以沒有什麼人用,
與是否方便?
應是有很大關係的!
 
我可能已猜到(不甚方便)原因
若真是此原因
則只要稍作修改
就可臻完備了
故我極有興趣加以研究
 
您以前有傳程式及說明給我
慚愧沒有細加研究
 
目前有找到且下載了
是015MN.ttf麼
但執行後
只見到三個音符耶
是否還須下載多個檔?
 
請問何處可找到使用說明麼?
返回頂部
kam 顯示下拉菜單
高級會員
高級會員


註冊時間: 2000 Sep 16
狀態: 離線
積分: 669
文章功能 文章功能   引用 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 顯示下拉菜單
中級會員
中級會員
頭像

註冊時間: 2008 Sep 02
狀態: 離線
積分: 222
文章功能 文章功能   引用 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

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

引用@ IE v8.0 :


引用@ FireFox v3.6 :


引用@ Google Chrome v6.0 :

一步一腳印 一枝草一點露 福莫盡享 行善助人但問赤子心
返回頂部
CHIANG 顯示下拉菜單
高級會員
高級會員


註冊時間: 2000 Aug 21
狀態: 離線
積分: 873
文章功能 文章功能   引用 CHIANG 引用  發表回覆回覆 點擊鏈接返回原帖 發表:  2010 Oct 22 5:47pm
我也碰過某些軟體不能辨識使用 彩虹、 KAM 、MidiXiaoA ...這類不占位字體的。

江振興 台中 20101022 17 : 35
.╭灨
╭ 振興箏院|.ooO CHIANG TAIWAN
╰☉====☉╯古箏教學、樂譜制作04-22417995
返回頂部
もう 顯示下拉菜單
新進會員
新進會員


註冊時間: 2010 Aug 20
狀態: 離線
積分: 2
文章功能 文章功能   引用 もう 引用  發表回覆回覆 點擊鏈接返回原帖 發表:  2011 Nov 02 10:22am
發起人 MidiXiaoA MidiXiaoA 發表的內容:


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


驗測網址 => 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?),他可能就沒辦法支援。

至於哪些瀏覽器、哪些版本以上才支援哪種字體格式,
直接看「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
這種寫法裡面多照顧到其他類型的瀏覽器,但也要多用幾種對應用的字型檔案類型。
基本上只要有其中一種(例如 *.ttf),就可以想辦法轉換了。
透過@FONT-FACE GENERATOR就可以直接從線上操作轉換。

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

返回頂部
 發表回覆 發表回覆 頁  12>
  分享文章   

論壇跳轉 論壇權限 顯示下拉菜單

Forum Software by Web Wiz Forums® version 10.18
Copyright ©2001-2014 Web Wiz Ltd.

本頁處理時間為 0.783 秒