TW201837738A - 於網頁的內容變更時顯示字型的方法 - Google Patents

Abstract

一種於網頁的內容變更時顯示字型的方法，包括下述步驟。下載包括第一字碼資訊與第一字型資訊的網頁資訊到瀏覽器端。瀏覽器端的字型顯示程式至字型伺服器下載第一子集合字型檔案。於瀏覽器端更新網頁內容產生第二字碼資訊，第二字碼資訊所對應到的字型圖像未出現在第一子集合字型檔案，第二字碼資訊是對應到第二字型資訊。瀏覽器端將網頁網址、第二字碼資訊、與第二字型資訊傳送至字型伺服器。字型產生模組產生對應的第二子集合字型檔案。下載第二子集合字型檔案，瀏覽器端根據第二子集合字型檔案將第二字碼資訊與第二字型資訊呈現於網頁上。

Description

於網頁的內容變更時顯示字型的方法

本發明是關於一種於網頁的內容變更時顯示字型的方法，尤其是針對亞洲語系字型在網頁顯示字型的方法。

隨著資訊科技的不斷進展，人的生活可以說是已經離不開網際網路。相較於全球資訊網（World Wide Web）發展的早期，目前網頁上所呈現的內容可以說是愈來愈豐富。舉例來說，在早期瀏覽器端的網頁所呈現文字的字型絕大部分是由超文件標示語言（HyperText Markup Language，簡稱：HTML）來定義，然而隨著網頁內容愈來愈多元與豐富的趨勢下，已有業者開始提供根據網頁需求透過網際網路下載不同字型檔案的服務。這樣一來，即使瀏覽器端未安裝該字型的樣式，也可讓使用者在瀏覽網頁時享受到多樣化的字型。然而，亞洲文字字型的檔案通常很大，需花費較多的時間下載，從而增加使用者的等待時間。 台灣專利I427534 藉由圖騰伺服器產生網頁圖騰之方法中揭露之方法，是以圖騰顯示程式與圖騰伺服器通訊後，以該網頁之字碼及字型資訊來取得子集合字型，以縮小字型檔案達到加快下載呈現速度之目的。該方法雖較整個字型檔案下載快速，但在與圖騰伺服器通訊仍有等待時間，依照網路品質與頻寬不同約需等待數秒，等待時間中間會有數秒顯示為系統預設字型，等待子集合字型檔案完全下載完成後，方能正確顯示出設定的字型樣式。因此，該專利的專利權人於之後在專利申請案105115119中提出加速網頁顯示亞洲語系字型的方法，以讓瀏覽者省略中間的等待時間，能直接瀏覽到網頁設定的字型樣式。然而，某些網頁在使用者往下拉動時會即時更新資料，又或者某些網頁與使用者會進行互動從而產生新的內容。然而，在專利申請案105115119中並未考慮到網頁的內容即時更新的情形，對於網頁即時更新所產生的內容，其無法支援。也就是說，網頁即時更新所產生的內容無法享有多樣化的字型。

為了解決上述之問題，本發明的目的在於提供一種於網頁的內容變更時顯示字型的方法，以使網頁即時更新所產生的內容能享有多樣化的字型。 基於上述目的與其他目的，本發明提供一種於網頁的內容變更時顯示字型的方法，包括以下的步驟。首先，從對應到一網頁網址的一網頁源下載至少一網頁資訊到一瀏覽器端，該網頁資訊包括一連接資訊、至少一第一字碼資訊、與一第一字型資訊，該第一字碼資訊對應到第一字型資訊。瀏覽器端根據連接資訊從一字型伺服器下載一字型顯示程式，之後字型顯示程式至字型伺服器下載一第一子集合字型檔案，且瀏覽器端根據第一子集合字型檔案顯示一網頁。於瀏覽器端更新網頁的內容而產生至少一第二字碼資訊，該第二字碼資訊所對應到的字型圖像未出現在第一子集合字型檔案中，且第二字碼資訊是對應到一第二字型資訊。接著，重新分析全部的網頁資訊。再來，瀏覽器端將網頁網址、第一字碼資訊、第二字碼資訊、第一字型資訊、與第二字型資訊傳送至字型伺服器。字型產生模組根據網頁網址、第一字碼資訊、第二字碼資訊、第一字型資訊、與第二字型資訊產生至少一對應的第二子集合字型檔案。接下來，下載第二子集合字型檔案至瀏覽器端。然後，瀏覽器端至少根據第二子集合字型檔案將第一字碼資訊、第二字碼資訊、第一字型資訊、與第二字型資訊呈現於網頁上。 基於上述目的與其他目的，本發明再提供一種於網頁的內容變更時顯示字型的方法，包括以下的步驟。首先，從對應到一網頁網址的一網頁源下載至少一網頁資訊到一瀏覽器端，該網頁資訊包括一連接資訊、至少一第一字碼資訊、與一第一字型資訊，該第一字碼資訊對應到第一字型資訊。瀏覽器端根據連接資訊從一字型伺服器下載一字型顯示程式，之後字型顯示程式至字型伺服器下載一第一子集合字型檔案，且瀏覽器端根據第一子集合字型檔案顯示一網頁。於瀏覽器端更新網頁的內容而產生一第二字碼資訊，該第二字碼資訊所對應到的字型圖像未出現在第一子集合字型檔案中，且第二字碼資訊是對應到一第二字型資訊。接著，字型顯示程式分析網頁資訊中的第二字碼資訊或第二字型資訊。再來，瀏覽器端將網頁網址、第二字碼資訊、與第二字型資訊傳送至字型伺服器。字型產生模組根據網頁網址、第二字碼資訊、與第二字型資訊產生至少一對應的第二子集合字型檔案。接下來，下載第二子集合字型檔案至瀏覽器端。然後，瀏覽器端至少根據第二子集合字型檔案將第二字碼資訊與第二字型資訊呈現於該網頁上。 在上述的於網頁的內容變更時顯示字型的方法中，如第二字型資訊相同於第一字型資訊，下載之第二子集合字型檔將覆蓋第一子集合字型檔效果。 在上述的於網頁的內容變更時顯示字型的方法中，如第二字型資訊相同於第一字型資訊，可於該瀏覽器端，第二字型資訊的名稱不同於第一字型資訊的名稱。而且，第二字型資訊的名稱是改成第一字型資訊的名稱後傳送至字型伺服器。此外，於下載第二子集合字型檔案至瀏覽器端後，第二子集合字型檔案中該第二字型資訊的名稱被改回第二字型資訊原有的名稱。

請參照圖1，圖1所繪示為本發明之系統的實施例的示意圖。在本實施例中，系統100包括一網頁源110、一瀏覽器端120、與一字型伺服器130，其中網頁源110、瀏覽器端120、與字型伺服器130之間是藉由網際網路2而彼此通訊連接。網頁源110是由至少一個（在本實施例為多個）伺服主機112所構成，這些伺服主機112可以置於一處或分散於多處。另外，瀏覽器端120在本實施例中為一桌上型電腦，此桌上型電腦包括一主機123與一螢幕124；在其他實施例中，瀏覽器端120也可以為一筆記型電腦、一智慧型手機、一平板電腦、一All in One電腦或其他可以瀏覽網頁的電子裝置。此外，字型伺服器130也可由一個或多個伺服主機所構成，且字型伺服器130包括一字型產生模組132與一原始字型資料庫134，關於字型產生模組132與原始字型資料庫134的詳細運作方式可參考專利申請案105115119中的內容。 請同時參照圖2A與圖2B，圖2A與圖2B所繪示為本發明之於網頁的內容變更時顯示字型的方法的第一實施例的流程圖。首先，實施步驟S110，使用者於瀏覽器端120將瀏覽器開啟，在本實施例中，瀏覽器可以為Internet Explorer、Firefox、Opera Web Browser、或Google Chrome等。再來，實施步驟S120，之後透過超連接的方式連接到網頁源，這樣螢幕124就會顯示出如圖3A所示的網頁，圖3A所示的網頁網址：http://www.abc.com.tw/。需注意的是，圖3A所示網頁網址與網頁內容僅是示意，不代表真實網址，且網頁所示的內容也僅用於本申請案說明之用。此外，如圖4A所示，會從網頁源110下載到瀏覽器端120的網頁資訊包括一連接資訊、至少一第一字碼資訊、與一第一字型資訊，其中連接資訊是指連接到字型伺服器130的網址。另外，第一字碼資訊則例如是圖3A所示網頁30中的『你們好嗎』，而第一字型資訊則例如是指上述字碼所使用的字型，亦即第一字碼資訊是對應到第一字型資訊，例如為：noto-1字型。 之後，實施步驟S130，如圖4B所示，瀏覽器端120根據連結資訊連接到字型伺服器130後，便會從字型伺服器130下載字型顯示程式。再來，實施步驟S140，位於瀏覽器端120的字型顯示程式會根據至少一網頁網址（即圖3A所示的網頁網址：http://www.abc.com.tw/）與至少一第一字型資訊（亦即：noto-1字型），而產生至少一第一定址資訊。 然後，實施步驟S150，如圖4C所示，瀏覽器端120根據第一定址資訊從字型伺服器130下載一第一子集合字型檔案。在本實施例中，第一子集合字型檔案較佳是只包括對應到該網頁30中所示字碼的字型圖像，而非全部的字型圖像（亦即noto-1字型的全部字型圖像），這樣可增加下載的速度。然後，實施步驟S160，瀏覽器端120的主機123會對第一子集合字型檔案進行解譯，以產生一第一解釋結果，此第一解釋結果會呈現於瀏覽器端120的網頁上。詳細地說，瀏覽器端120會根據第一子集合字型檔案，而使網頁上的字碼（部分或全部）的字型會呈現對應到第一子集合字型檔案的字型。再來，實施步驟S170，由於使用者的行為而使網頁產生新的內容。例如，某些網頁（例如包括有Javascript程式碼的網頁）會與使用者互動而產生即時的內容更新。又或者，瀏覽器端120的某些應用程式在操作後會於網頁產生新的內容。舉例來說，如圖3A所示，原本網頁資訊有含『你們好嗎』這四個字，且其所呈現的字型是對應到第一字型資訊（如：noto-1字型）。後來，如圖3B所示，因為與使用者互動的關係而產生『今天吃什麼』這五個字，且『今天吃什麼』這五個字是與『你們好嗎』這四個字並排在一起。由於『今天吃什麼』這五個字所對應到的字型圖像並未包含在第一子集合字型檔案中，因此瀏覽器端120所呈現出的『今天吃什麼』的字型並非是由字型伺服器130所提供，而只能是瀏覽器端120所預設的字型，相較之下比較不美觀，這樣一來會影響使用者的觀感。在專利申請案105115119中，這樣的問題是沒有辦法解決的，但本實施例則會透過下述的流程解決問題。 請參照步驟S180，字型顯示程式重新分析全部的網頁資訊。為了執行此步驟，網頁的設計者在編輯網頁時可加入相關的程式碼，指定當網頁的內容更新時，更新的內容所對應到的字型。例如，請參照圖6A，其是利用HTML的方式指定當網頁的內容更新時，更新的內容所對應到的字型，又或者可用CSS的方式指定更新內容的字型（如圖6B所示）。因此，當網頁更新後，瀏覽器端120便會重新分析全部網頁的資訊。在本實施例中，例如是用_jf.flush() 函數重新分析全部網頁，其是會再分析全部網頁的資訊一次，以擷取網頁資訊中的字碼資訊與字型資訊。在此，字碼資訊包括第一字碼資訊與第二字碼資訊，而字型資訊包括第一字型資訊與第二字型資訊。在本實施例中，第二字碼資訊即為網頁更新後的內容，亦即：『今天吃什麼』這五個字。而在此實施例中，第二字型資訊是與第一字型資訊相同，也就是圖6A與圖6B所指的noto-1字型。 再來，請參照步驟S190與圖4D所示，因第二字型資訊是與第一字型資訊相同，會將網頁網址、第一字碼資訊加上第二字碼資訊、第一字型資訊與第二字型資訊傳送至字型伺服器130。而且，在本實施例中，因第二字型資訊是與第一字型資訊相同，故實際上是將網頁網址、第一字碼資訊、第二字碼資訊、第一字型資訊傳送至字型伺服器130。接著，實施步驟S210，字型伺服器130中的字型產生模組會根據所接受的訊息（亦即：網頁網址、第一字碼資訊加上第二字碼資訊、第一字型資訊或與第二字型資訊），而產生一第二子集合字型檔案。 之後，實施步驟S220，請同時參照圖4E，字型伺服器130將第二子集合字型檔案傳送到瀏覽器端120。然後，實施步驟S230，瀏覽器端120的主機123對第二子集合字型檔案進行解譯並產生一第二解譯結果，並將第二解譯結果呈現於網頁30上。這樣一來，原本呈現在網頁30上的『你們好嗎』與『今天吃什麼』就會呈現一樣的字型（如圖3C所示）。 在上述的實施例中，『你們好嗎』與『今天吃什麼』是呈現同樣的字型，也就是說第一字型資訊與第二字型資訊是相同的。然而，本領域具有通常知識者，也可將『你們好嗎』與『今天吃什麼』分別設定成不同的字型，例如將圖6A與圖6B所指的noto-1字型改為noto-2字型。也就是說，第一字型資訊與第二字型資訊是不同的。 此外，需注意的是，雖然在實施步驟S170時，『你們好嗎』雖已經以所欲的字型呈現在螢幕上，但當第二字型資訊是與第一字型資訊相同時，在實施步驟S220時，瀏覽器端120仍會重新載入『你們好嗎』的noto-1字型的字型圖像，而造成網路頻寬的浪費。而且，瀏覽器端120仍會對『你們好嗎』再次進行處理，也就是說，第二子集合字型檔案會覆蓋第一子集合字型檔案。這樣會導致：『你們好嗎』雖會保持原有的字型，但卻會在螢幕上呈現出閃爍的現象。 請同時參照圖5A與圖5B，圖5A與圖5B所繪示為本發明之於網頁顯示字型的方法的第二實施例的流程圖。由於圖5A與圖5B的步驟S110~步驟S170是與第一實施例相同，因此在本實施例中將標以相同的標號，並不再贅述。在網頁30因使用者互動而產生即時的更新後，執行步驟S380，分析網頁30即時更新後所產生的第二字碼資訊或第二字型資訊。為了執行此步驟，網頁的設計者在編輯網頁時可加入相關的程式碼，指定當網頁更新時，更新的內容所對應到的字型。例如，請參照圖6C，其是利用CSS的方式指定當網頁更新時，更新的內容所對應到的字型。在本實施例中，例如是用_jf.flushfont(“noto-2”)函數指定處理網頁30中的 noto-2字型（亦即：第二字型資訊），其是會分析網頁30中使用到noto-2字型所對應到的字碼（包括第二字碼資訊，亦即：『今天吃什麼』），以擷取網頁資訊中的第二字型資訊與第二字型資訊所對應到的字碼資訊。又或者，例如是用_jf.flushcss(“.hello”) 函數指定處理網頁中的class=“hello”元素，分析class=“hello”元素中所使用的字型（noto-2字型，亦即：第二字型資訊）與第二字碼資訊（亦即：『今天吃什麼』）。 再來，請參照步驟S390與圖7A，將網頁網址、第二字碼資訊、與第二字型資訊傳送至字型伺服器130。接著，實施步驟S410，字型伺服器130中的字型產生模組會根據所接受的訊息（亦即：網頁網址、第二字碼資訊、與第二字型資訊），而產生一第二子集合字型檔案。 之後，實施步驟S420，請同時參照圖7B，字型伺服器130將第二子集合字型檔案傳送到瀏覽器端120。然後，實施步驟S430，瀏覽器端120的主機123對第二子集合字型檔案進行解譯並產生一第二解譯結果，並將第二解譯結果呈現於網頁30上。這樣一來，原本呈現在網頁30上的『今天吃什麼』就會呈現所欲的字型（本實施例中為noto-2字型）。 然而，在第二實施例中，若第一字型資訊與第二字型資訊是相同的，且是用_jf.flushfont(“noto-1”)函數來分析網頁30，於步驟S380中仍會分析第一字型資訊，而於步驟S390中仍會將第一字型資訊傳送到字型伺服器130。因此，於步驟S430中瀏覽器端120仍會重新載入第一字型資訊，且瀏覽器端120仍會對『你們好嗎』再次進行處理，故仍會在螢幕上呈現出閃爍的現象。 為了解決若第一字型資訊與第二字型資訊是相同的，瀏覽器端120仍會重新載入第一字型資訊，且螢幕上呈現出閃爍的現象等問題。於第三實施例中，網頁的設計者在編輯網頁時，仍使第二字型資訊的名稱不同於第一字型資訊的名稱，如圖6A所示仍將第二字型資訊的名稱命名為“noto-2”。在執行步驟S390時，第二字型資訊的名稱“noto-2”是改成第一字型資訊的名稱“noto-1”後在傳送至字型伺服器130，相關的程式碼如圖6D所示。由於字型伺服器130所收到的是第一字型資訊的名稱“noto-1”，因此會將其當作第一字型資訊進行處理，因此所做成的第二子集合字型檔案，其中的第二字型資訊的名稱仍然為第一字型資訊的名稱“noto-1”。然而，在步驟S430中，第二子集合字型檔案中該第二字型資訊的名稱被改回該第二字型資訊原有的名稱，相關的程式碼如圖6E所示。由於第二字型資訊的名稱已被改回原有的名稱，故在步驟S430中僅會對『今天吃什麼』進行處理，『你們好嗎』不會有相關變動，故不會發生閃爍的現象。而且，這樣一來，網頁30在即時更新後，縱使『你們好嗎』與『今天吃什麼』是有相同的字型，也不會發生與『你們好嗎』相關的字碼資訊與字型資訊發生重複傳輸和處理事情。 本發明說明如上，然其並非用以限定本創作所主張之專利權利範圍。其專利保護範圍當視後附之申請專利範圍及其等同領域而定。凡本領域具有通常知識者，在不脫離本專利精神或範圍內，所作之更動或潤飾，均屬於本創作所揭示精神下所完成之等效改變或設計，且應包含在下述之申請專利範圍內。

2‧‧‧網際網路

30‧‧‧網頁

100‧‧‧系統

110‧‧‧網頁源

112‧‧‧伺服主機

120‧‧‧於網頁顯示字型的瀏覽裝置

123‧‧‧主機

124‧‧‧螢幕

130‧‧‧字型伺服器

132‧‧‧字型產生模組

134‧‧‧原始字型資料庫

S110~S190、S210~S230、S380~S430‧‧‧流程圖步驟

圖1所繪示為本發明之系統的實施例的示意圖。 圖2A與圖2B所繪示為本發明之於網頁顯示字型的方法的第一實施例的流程圖。 圖3A至圖3C所繪示為本發明之網頁的實施例與其變化。 圖4A至圖4E所繪示為網頁源、瀏覽器端、與字型伺服器間的資訊遞送關係的示意圖。 圖5A與圖5B所繪示為本發明之於網頁顯示字型的方法的第二實施例的流程圖。 圖6A~圖6E所繪示為本發明之瀏覽器端的網頁之程式碼的部分之相關實施例。 圖7A與圖7B所繪示為瀏覽器端與字型伺服器間的資訊遞送關係的示意圖。

Claims (12)

1. 一種於網頁的內容變更時顯示字型的方法，包括： (a) 從對應到一網頁網址的一網頁源下載至少一網頁資訊到一瀏覽器端，該網頁資訊包括一連接資訊、至少一第一字碼資訊、與一第一字型資訊，該第一字碼資訊對應到該第一字型資訊； (b) 該瀏覽器端根據該連接資訊從一字型伺服器下載一字型顯示程式； (c) 該字型顯示程式至該字型伺服器下載一第一子集合字型檔案，且該瀏覽器端根據該第一子集合字型檔案顯示一網頁； (d) 於該瀏覽器端，更新該網頁的內容而產生至少一第二字碼資訊，該第二字碼資訊所對應到的字型圖像未出現在該第一子集合字型檔案中，且該第二字碼資訊是對應到一第二字型資訊； (e) 由該字型顯示程式重新分析全部的網頁資訊； (f) 該瀏覽器端將該網頁網址、該第一字碼資訊、該第二字碼資訊、該第一字型資訊、與該第二字型資訊傳送至該字型伺服器； (g) 該字型產生模組根據該網頁網址、該第一字碼資訊、該第二字碼資訊、該第一字型資訊、與該第二字型資訊產生至少一對應的第二子集合字型檔案； (h) 下載該第二子集合字型檔案至該瀏覽器端；以及 (i) 該瀏覽器端至少根據該第二子集合字型檔案將該第一字碼資訊、該第二字碼資訊、該第一字型資訊、與該第二字型資訊呈現於該網頁上。
2. 如申請專利範圍第1項之於網頁的內容變更時顯示字型的方法，其中於(d)步驟中，是藉由該瀏覽器端的應用程式或嵌入在該瀏覽器端的Javascript來更新該網頁資訊。
3. 如申請專利範圍第1項之於網頁的內容變更時顯示字型的方法，其中於(d)步驟中，是藉由CSS語言來將該第二字碼資訊是對應到該第二字型資訊。
4. 如申請專利範圍第1項之於網頁的內容變更時顯示字型的方法，其中於(d)步驟中，該第二字型資訊是相同於該第一字型資訊，於(h)步驟中該第二子集合字型檔案將覆蓋該第一子集合字型檔案。
5. 一種於網頁的內容變更時顯示字型的方法，包括： (a) 從對應到一網頁網址的一網頁源下載至少一網頁資訊到一瀏覽器端，該網頁資訊包括一連接資訊、至少一第一字碼資訊、與一第一字型資訊，該第一字碼資訊對應到該第一字型資訊； (b) 該瀏覽器端根據該連接資訊從一字型伺服器下載一字型顯示程式； (c) 該字型顯示程式至該字型伺服器下載一第一子集合字型檔案，且該瀏覽器端根據該第一子集合字型檔案顯示一網頁； (d) 於該瀏覽器端，更新該網頁的內容而產生至少一第二字碼資訊，該第二字碼資訊所對應到的字型圖像未出現在該第一子集合字型檔案中，且該第二字碼資訊是對應到一第二字型資訊； (e) 由該字型顯示程式分析該網頁資訊中的該第二字碼資訊或該第二字型資訊； (f) 該瀏覽器端將該網頁網址、該第二字碼資訊、與該第二字型資訊傳送至該字型伺服器； (g) 該字型產生模組根據該網頁網址、該第二字碼資訊與該第二字型資訊產生至少一對應的第二子集合字型檔案； (h) 下載該第二子集合字型檔案至該瀏覽器端；以及 (i) 該瀏覽器端根據該第二子集合字型檔案將該第二字碼資訊與該第二字型資訊呈現於該網頁上。
6. 如申請專利範圍第5項之於網頁的內容變更時顯示字型的方法，其中於(d)步驟中，是將該第二字碼資訊對應到一元素，而於(e)步驟中是藉由分析該元素以分析該第二字碼資訊。
7. 如申請專利範圍第5項之於網頁的內容變更時顯示字型的方法，其中於(d)步驟中，是將該第二字碼資訊對應到一元素，該元素對應到該第二字型資訊，而於(e)步驟中是藉由分析該第二字型資訊以分析該第二字碼資訊。
8. 如申請專利範圍第5項之於網頁的內容變更時顯示字型的方法，其中於(d)步驟中，若該第二字型資訊是相同於該第一字型資訊，但於該瀏覽器端，該第二字型資訊的名稱不同於該第一字型資訊的名稱；於(f)步驟中，該第二字型資訊的名稱是改成該第一字型資訊的名稱後傳送至該字型伺服器；且於(h)步驟與(i)步驟中，該第二子集合字型檔案中該第二字型資訊的名稱被改回該第二字型資訊原有的名稱。
9. 如申請專利範圍第5項之於網頁的內容變更時顯示字型的方法，其中於(d)步驟中，是藉由該瀏覽器端的應用程式或嵌入在該瀏覽器端的Javascript來更新該網頁資訊。
10. 如申請專利範圍第5項之於網頁的內容變更時顯示字型的方法，其中於(d)步驟中，是藉由CSS語言來將該第二字碼資訊是對應到該第二字型資訊。
11. 如申請專利範圍第5項之於網頁的內容變更時顯示字型的方法，其中於(d)步驟中，該第二字型資訊相同於該第一字型資訊，則(e)步驟中字型顯示程式也將分析該第一字碼資訊，於(f)步驟中該瀏覽器端也將傳送該第一字碼資訊至該字型伺服器，於(h)步驟中該第二子集合字型檔案效果將覆蓋該第一子集合字型檔案。
12. 如申請專利範圍第1項至第11項中任一項之於網頁顯示字型的方法，其中該瀏覽器端為裝設有瀏覽器軟體的一智慧型手機、一平板電腦、一桌上型電腦、或一筆記型電腦。