排版

Casey Reas 和 Ben Fry

?

印刷復制和顯示技術的發展已經并將繼續影響人類文化。15世紀德國約翰內斯·古騰堡（Johannes Gutenberg）利用鉛鑄字母開發的早期印刷技術為提高識字率和科學革命提供了催化劑。自動排版機，如19世紀發明的列印機，改變了信息的生產、分發和消費方式。在數字時代，自從上世紀80年代個人電腦的普及和90年代互聯網的快速發展以來，我們的文本消費方式已經發生了巨大的變化。電子郵件、網站和即時消息中的文本充斥著電腦屏幕，盡管過去的許多排版規則都適用，屏幕上的字體需要額外考慮，以增強溝通和易讀性。

?

屏幕上的字母是通過設置像素的顏色創建的。排版的質量受到屏幕分辨率的限制。因為在歷史上，屏幕的分辨率比紙低，所以人們開發了一些技術來增強屏幕上字體的外觀。最早的蘋果Macintosh電腦上的字體由10、12和24點等特定大小的小位圖圖像組成。利用這項技術，每種字體的變體都是為特定字體的每種大小而設計的。例如，舊金山字體中的字符A使用不同的圖像來顯示大小為12和18的字符。1985年激光打印機問世時，Postscript技術定義了字體，并對每個字符的輪廓進行了數學描述。這使得屏幕上的字體可以縮放到大尺寸，并且看起來仍然很平滑。蘋果和微軟后來開發了TrueType，另一種大綱字體格式。最近，這些技術被合并到OpenType格式中。同時介紹了在屏幕上平滑文本的方法。這些消除混疊技術使用字符邊緣的灰色像素來補償低屏幕分辨率。

?

20世紀80年代中期個人電腦的激增催生了一個快速排版實驗的時期。數字字體是軟件，舊的金屬和照片字體規則不再適用。被稱為萊特羅的荷蘭印刷師解釋說：“工業上生產印刷術的方法意味著所有的字母都必須是相同的……印刷術現在是用先進的設備來生產的，而這些設備并沒有強加這樣的規則。唯一的限制是在我們的期望中。”1萊特羅用他們的字體Beowolf擴展了排版的可能性（第131頁）。它以不同的方式打印每一個字母，例如，每次打印A時，它將具有不同的形狀。在這段時間里，Zuzana Licko和Barry Deck等印刷師借助新的軟件工具創造出了創新的字體。軟件的靈活性使得大量的字體恢復和歷史性的敬意，如羅伯特斯利姆巴赫的Adobe Garamond和Jonathan Hoefler的Proteus項目。通過軟件字體工具，諸如fi和?等字母對之間的連字連接之類的印刷細微差別——由于現代機械化印刷術而變得不切實際——再次繁榮起來。

?

繪制文本

函數的作用是：在屏幕上繪制字母、單詞和段落。在最簡單的用法中，第一個參數可以是字符串、char、int或float。第二個和第三個參數設置文本的位置。默認情況下，第二個參數定義從窗口左邊緣到窗口頂部的距離；第三個參數定義從文本基線到窗口頂部的距離。函數的作用是：以像素為單位定義字母的大小。用于定義文本大小的數字不是每個字母的精確高度，其差異取決于每個字體的設計。例如，語句textSize（30）；不一定要在30像素高處畫一個大寫的H。函數的作用是：控制文本的顏色和透明度。此函數影響文本的方式與影響矩形（）和橢圓（）等形狀的方式相同，但文本不受stroke（）的影響。

?

fill(0); text("LAX", 0, 40); // 顯示 "LAX" 在坐標 (0,40) text("AMS", 0, 70); // 顯示 "AMS" 在坐標 (0,70) text("FRA", 0, 100); // 顯示 "FRA" 在坐標 (0,100)

---

textSize(32); // 文本大小 32 fill(0); text("LAX", 0, 40); text("ORD", 0, 70); text("DAY", 0, 100);

---

textSize(32); fill(0); // 填充色為黑色 text("LAX", 0, 40); fill(126); // 填充色為灰色 text("HKG", 0, 70); fill(255); // 填充色為白色 text("PVG", 0, 100);

---

textSize(64); fill(0, 140); // 用低不透明度填充黑色 text("8", 0, 60); text("8", 15, 65); text("8", 30, 70); text("8", 45, 75); text("8", 60, 80);

?

另一個版本的text（）在矩形內繪制字符。在這種情況下，第二個和第三個參數定義框的左上角的位置，第四個和第五個參數定義框的寬度和高度。如果文本長度超過定義框的尺寸，則不會顯示文本。

?

String s = "Five hexing wizard bots jump quickly."; fill(0); text(s, 10, 10, 60, 80);

?

?

String s = "Five hexing wizard bots jump quickly."; fill(0); text(s, 10, 10, 60, 55); // Box too small

?

本章中的示例是第一個將外部媒體加載到草圖中的示例。到目前為止，所有示例都只使用了在處理過程中通過繪圖函數（如line（）和elliple（））生成的圖形。處理能夠加載和顯示其他媒體，包括字體、圖像、矢量文件、格式化數據和聲音。本章著重于加載字體，其他章節討論有關其他媒體類型的特定信息，但有關加載適用于所有類別的媒體的一些內容。這里討論這些相似之處。

?

在處理草圖中使用外部媒體之前，需要在每次運行程序時加載它。媒體可以直接從草圖的文件夾、計算機上的另一個位置或通過Internet加載。通常，媒體直接從草圖的文件夾加載。介質通常放在稱為數據的文件夾中；有三種方法可以將介質放入此文件夾：

?

通過在處理環境的“草圖”菜單中選擇“添加文件”選項來添加文件。導航到計算機上文件的位置，選擇文件的圖標或名稱，然后單擊“打開”將其添加到草圖的數據文件夾中。

可以將一個文件（或一組文件）拖放到處理文本區域。如果成功，將在消息區域中顯示一條注釋，說明“已將一個文件添加到草圖中”

通過從“草圖”菜單中選擇“顯示草圖文件夾”選項打開草圖文件夾，可以手動添加文件。如果不存在名為data的文件夾，則在其中創建一個文件夾，并將該文件復制到該文件夾中。

?

要確認文件已正確添加，請從“草圖”菜單中選擇“顯示草圖文件夾”。文件將在數據文件夾中。圖像文件放在正確的位置，就可以加載了。請確保將文件格式擴展名作為名稱的一部分，并將整個名稱用引號括起來（例如，“pup.gif”、“kat.jpg”、“ignatz.png”）。加載文件時，請注意在寫入文件名時使用正確的大寫字母。如果文件是arch.jpg，嘗試加載arch.jpg或arch.jpg將創建錯誤。另外，避免在文件名中使用空格，這可能會導致問題。

?

為了使媒體文件可以從程序中的任何位置訪問，它們通常被聲明為setup（）和draw（）之外的全局可用變量。文件通常在setup（）中加載，因為它們只需要加載一次，而且加載它們需要時間。在draw（）中加載文件會降低程序的幀速率，因為這會導致文件重新加載每個幀。在setup（）中加載文件后，可以在程序中的任何位置使用該文件。在大多數處理程序中，所有文件都是在程序啟動時加載的。

?

矢量字體

?

要使用不同于默認字體的字體，需要更多的函數來準備要用于處理的字體。createFont（）函數用于轉換TrueType字體（.ttf）或OpenType字體（.otf），以便它可以通過text（）顯示。函數的作用是定義要顯示的當前字體。可以使用安裝在運行處理的計算機上或存儲在草圖數據文件夾中的任何兼容字體。以下短程序用于將可用的已安裝字體列表打印到控制臺：

?

String[] fontList = PFont.list(); printArray(fontList);

?

printArray（）函數（第420頁）用于在新行上寫入每個字體。打印到控制臺的前幾個選項是一般的印刷分類，例如Serif、SansSerif和Monospaced。使用這些選項定義樣式，但不定義特定字體。當這個列表是在用來寫這本書的計算機上生成的，573個字體選項的列表會打印到控制臺上。根據安裝的操作系統和自定義字體，計算機將產生不同的結果。該列表以跨平臺工作的常規字體類別開始，然后以特定的字體名稱繼續。以下是我們名單中的一小部分：

?

[0] "Serif"

[1] "SansSerif"

[2] "Monospaced"

[3] "Dialog"

[4] "DialogInput"

[5] "ACaslonPro-Bold"

…

[567] "ZXX-Sans"

[568] "ZXX-Xed"

[569] "ZapfDingbatsITC"

[570] "Zapfino"

[571] "Ziggurat-Black"

[572] "Ziggurat-BlackItalic"

?

在程序中使用字體之前，必須將其轉換并設置為當前字體。處理有一個稱為PFont的唯一數據類型來存儲字體數據。創建一個PFont類型的新變量，并使用createFont（）函數轉換字體。createFont（）的第一個參數是要轉換的字體的名稱，第二個參數定義字體的基本大小。（可選的第三和第四個參數在引用中定義。）然后必須使用textFont（）函數設置當前字體。在我們的開發計算機上，要使用上述列表選項571的Ziggurat Black，運行以下代碼：

?

PFont zigBlack;void setup() {size(100, 100);zigBlack = createFont("Ziggurat-Black", 32);textFont(zigBlack);fill(0); }void draw() {background(204);text("LAX", 0, 40);text("LHR", 0, 70);text("TXL", 0, 100); }

?

要使此程序在您的計算機上運行，您可能需要修改第5行以使用計算機上的字體。此程序類似于代碼12-01，但請注意Ziggurat字體中的字母與默認字體之間的差異。

?

要確保字體將加載到所有計算機上，無論字體是否已安裝，請將文件添加到草圖的數據文件夾中。（數據文件夾中的字體不會在控制臺列表中打印，如代碼12-07所示。）按照第10頁的說明將字體添加到數據文件夾中。使用數據文件夾中的字體時，需要將完整的文件名（包括數據類型擴展名）作為參數寫入createFont（）。下面的示例與前面的示例類似，但它在數據文件夾中使用OpenType字體。它使用源代碼Pro，一種可以在線找到并通過web瀏覽器下載的開源字體。

?

PFont sourceLight;void setup() {size(100, 100);sourceLight = createFont("SourceCodePro-Light.otf", 34);textFont(sourceLight);fill(0); }void draw() {background(204);text("LAX", 0, 40);text("LHR", 0, 70);text("TXL", 0, 100); }

?

要在一個程序中使用兩種字體，請創建兩個PFont變量并使用textFont（）函數更改當前字體。基于前面的兩個示例，Ziggurat黑色字體從其在本地計算機上的位置加載，源代碼Pro從數據文件夾加載。

?

PFont zigBlack, sourceLight;void setup() {size(100, 100);zigBlack = createFont("Ziggurat-Black", 24);sourceLight = createFont("SourceCodePro-Light.otf", 34);fill(0); }void draw() {background(204);textFont(zigBlack);text("LAX", 0, 40);textFont(sourceLight);text("LHR", 0, 70);textFont(zigBlack);text("TXL", 0, 100); }

?

像素字體

?

處理還可以處理字體，將其轉換為小圖像紋理。這些字體不像為使用createFont（）進行處理而轉換并與默認渲染器一起使用的字體那樣靈活和清晰，但它們更適合與P2D和P3D渲染器一起使用。第547頁討論了渲染器之間的區別。處理使用的像素字體格式是1990年代中期在麻省理工學院媒體實驗室視覺語言工作室（VLW）開發的。VLW格式將每個字母數字字符存儲為像素網格。這是一種快速呈現文本的方法，可以在不包含矢量數據的情況下在草圖中包含字體。

?

要將字體轉換為VLW格式，請從“工具”菜單中選擇“創建字體”選項。將打開一個窗口，顯示計算機上安裝的兼容字體的名稱。從列表中選擇一種字體，然后單擊“確定”。該字體將生成并復制到當前草圖的數據文件夾中。若要確保字體存在，請單擊“草圖”菜單并選擇“顯示草圖文件夾”。創建字體工具提供設置字體大小和選擇是否具有平滑、抗鋸齒邊緣的選項。此工具還提供導出“所有字符”的選項，這意味著字體中的每個字符都將包含在內，因此將增加文件大小。

?

下面的示例使用與前面的createFont（）示例相同的字體。唯一的區別是用loadFont（）替換該函數。要運行這些示例，首先使用“創建字體”工具將字體轉換為VLW文件。將參數的名稱更改為loadFont（）以匹配創建的VLW文件的名稱。

?

PFont zigBlack;void setup() {size(100, 100);zigBlack = loadFont("Ziggurat-Black-32.vlw");textFont(zigBlack);fill(0); }void draw() {background(204);text("LAX", 0, 40);text("LHR", 0, 70);text("TXL", 0, 100); }

?

當字體以與創建時不同的大小繪制時，它會被縮放，因此看起來并不總是那么清晰和平滑。例如，如果字體以12像素創建并以96像素顯示，則它將顯示為模糊。

?

PFont zigBlack;void setup() {size(100, 100);zigBlack = loadFont("Ziggurat-Black-12.vlw");textFont(zigBlack);fill(0); }void draw() {background(204);textSize(12);text("A", 20, 20);textSize(96);text("A", 20, 90); }

?

為了獲得最佳效果，請按照創建字體的大小繪制一個字體。如果同一字體需要以多種大小使用，請考慮以這些精確的大小進行渲染和加載。當在3D中使用VLW字體時，具有不同z坐標的字母有時會遮擋其他字母。這可以用提示來糾正，見第547頁。

?

文本屬性

處理包括控制前導（文本行之間的間距）和對齊的函數。處理還可以計算任何字符或字符組的寬度，這是排列形狀和排版元素的有用技術。函數的作用是：設置文本行之間的間距。它有一個以像素為單位定義這個空間的參數。

?

String lines = "L1 L2 L3"; textSize(12); fill(0); textLeading(10); text(lines, 10, 15, 30, 100); textLeading(20); text(lines, 40, 15, 30, 100); textLeading(30); text(lines, 70, 15, 30, 100);

?

字母和單詞可以從它們的中心、左邊緣和右邊緣繪制。函數的作用是：通過參數設置繪制文本的對齊方式，參數可以是左對齊、居中對齊或右對齊。它設置字母相對于text（）函數中指定的x坐標的顯示特征。

?

fill(0); textSize(12); line(50, 0, 50, 100); textAlign(LEFT); text("Left", 50, 20); textAlign(RIGHT); text("Right", 50, 40); textAlign(CENTER); text("Center", 50, 80);

?

textSize（）、textLeading（）和textAlign（）的設置將用于對text（）函數的所有后續調用。但是，請注意，text size（）函數將重置文本行距，textFont（）函數將重置大小和行距。

?

函數的作用是：計算并返回任何字符或文本字符串的像素寬度。此數字是根據textFont（）和textSize（）函數定義的當前字體和大小計算的。由于每個字體的字母大小不同，并且許多字體中的字母寬度也不同，因此此函數是了解字符串或字符在屏幕上顯示時寬度的唯一方法。因此，請始終使用textWidth（）相對于文本定位元素，而不是將它們硬編碼到程序中。

?

String s = "AEIOU"; float tw; // Text width fill(0); textSize(14); tw = textWidth(s); text(s, 4, 40); rect(4, 42, tw, 5); textSize(28); tw = textWidth(s); text(s, 4, 76); rect(4, 78, tw, 5);

?

打字

當與鍵盤結合使用時，將字母畫到屏幕上會變得更加引人入勝。第97頁中介紹的keyPressed（）事件函數可用于記錄鍵入的每個字母。下面的兩個例子使用這個函數通過文本章節（第143頁）中介紹的字符串方法從鍵盤讀取和分析輸入。在這兩種情況下，字符串變量字母都以空開頭。鍵入的每個鍵都添加到字符串的末尾。第一個例子顯示了當按下鍵時字符串的增長，并在按下backspace時從末尾刪除字母。第二個例子建立在第一個例子的基礎上，當按下回車鍵或回車鍵時，程序會檢查是否鍵入了“gray”或“black”。如果輸入了其中一個單詞，則背景將更改為該值。

?

String letters = "";void setup() {size(100, 100);stroke(255);fill(0);textSize(16); }void draw() {background(204);float cursorPosition = textWidth(letters);line(cursorPosition, 0, cursorPosition, 100);text(letters, 0, 50); }void keyPressed() {if (key == BACKSPACE) {if (letters.length() > 0) {letters = letters.substring(0, letters.length()-1);}} else if (textWidth(letters+key) < width) {letters = letters + key;} }

---

String letters = ""; int back = 102;void setup() {size(100, 100);textSize(16);textAlign(CENTER); }void draw() {background(back);text(letters, 50, 50); }void keyPressed() {if ((key == ENTER) || (key == RETURN)) {letters = letters.toLowerCase();println(letters); // Print to console to see inputif (letters.equals("black")) {back = 0;} else if (letters.equals("gray")) {back = 204;}letters = ""; // Clear the variable} else if ((key > 31) && (key != CODED)) {// If the key is alphanumeric, add it to the Stringletters = letters + key;} }

?

許多人每天花幾個小時在電腦上輸入信件，但這一行動受到很大限制。什么功能可以添加到文本編輯器，使其對打字員更具響應性？例如，打字的速度可以減小字母的大小，或者長時間的停頓可以增加許多空格，模仿一個人說話時的停頓。如果鍵盤可以記錄一個人打字的難易程度（就像鋼琴在輕按鍵時彈奏軟音符的方式），并且可以自動分配屬性，例如斜體表示軟按，粗體表示強按，會怎么樣？這些類比說明了當前軟件如何保守地對待排版和打字。

?

許多藝術家和設計師對字體很感興趣，他們用鼠標、鍵盤和更奇特的輸入設備創造了獨特的字體探索方式。一個最小但引人入勝的例子是John Maeda的Type，Tap，Write軟件，創建于1998年，是為了向手動打字機致敬。該軟件使用鍵盤作為鍵盤黑白屏幕表示的輸入。按數字鍵使軟件在不同的模式中循環，每個模式都顯示了對鍵盤數據的有趣解釋。在Jeffrey Shaw和Dirk Groeneveld的《易讀的城市》（1989-91）中，建筑物被三維字母取代，創造出一個符合真實街道的排版城市。例如，在曼哈頓版本中，市長、出租車司機和弗蘭克·勞埃德·賴特的短信構成了這座城市。圖像顯示在投影屏幕上，用戶通過踩下并駕駛位于投影圖像前面的固定自行車進行導航。像這樣的項目表明，軟件提供了一個非凡的機會來擴展我們的讀寫方式。

?

排版元素可以被指定為定義與鼠標或鍵盤相關的個性的行為。一個詞可以通過向老鼠快速移動來表達攻擊，或者慢慢移動可以表達膽怯。下面的例子演示了這個領域的基本應用。在第一種情況下，單詞avoid遠離鼠標，因為它的位置設置為光標位置的倒數。在第二種情況下，當光標懸停在其位置上時，“撓癢癢”這個詞就會抖動。

?

void setup() {size(100, 100);textSize(24);textAlign(CENTER); }void draw() {background(204);text("avoid", width-mouseX, height-mouseY); }

?

?

float x = 33; float y = 60;void setup() {size(100, 100);textSize(24);noStroke(); }void draw() {fill(204, 120);rect(0, 0, width, height);fill(0);// If cursor is over the text, change the positionif ((mouseX >= x) && (mouseX <= x+55) &&(mouseY >= y-24) && (mouseY <= y)) {x += random(-2, 2);y += random(-2, 2);}text("tickle", x, y); }

?

筆記

一。Ellen Lupton，《用類型思考：設計師、作家、編輯和學生的批判指南》（普林斯頓建筑出版社，2004年），第29頁。

總結

以上是生活随笔為你收集整理的【07】processing-字体（中文）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。