怎么讓qt發(fā)聲

This is a big week for the project. While it was an important step last week to establish some basic responsiveness, we couldn’t really nail down the typography until we added the typeface. Too many aspects of the feel, proportions, and overall ‘color’ are tied not only to the specifics of the typesetting values, but also to the typeface itself. It’s important to remember that not only are we working with spacing around letters and words, but the typeface choice involves looking closely at the spacing inside the letters, and finding balance between the two.

這是該項(xiàng)目的重要一周。 上周建立基本響應(yīng)能力是重要的一步，但直到添加字體后，我們才能真正確定字體。 感覺，比例和整體“顏色”的太多方面不僅與排版值的細(xì)節(jié)有關(guān)，而且還與字體本身有關(guān)。 重要的是要記住，我們不僅要處理字母和單詞之間的間距，而且字體的選擇還需要仔細(xì)查看字母內(nèi)部的間距，并在兩者之間找到平衡。

文獻(xiàn)資料(v3)簡介 (Introducing Literata (v3))

This week we’ll be adding in a new typeface in both static and variable form, and I’m really pleased to be able to share that choice: Literata (v3) from TypeTogether (on behalf of Google Fonts). I’ve been working with this version for a few months now and am super excited to finally be able to share it with all of you. Literata was originally commissioned by Google to be the font for their ebook reader application back in 2014. Now in its third iteration, they’ve expanded the weight range and added optical sizes for both static and variable versions. It’s really lovely, and has been designed from the beginning for long-form reading on screens.

本周，我們將添加靜態(tài)和可變形式的新字體，我非常高興能夠分享這一選擇： TypeTogether的Literata ( v3) (代表Google字體)。 我已經(jīng)使用此版本幾個(gè)月了，很高興終于能夠與大家共享它。 Literata最初由Google委托于2014年成為其電子書閱讀器應(yīng)用程序的字體。現(xiàn)在，在第三次迭代中，他們擴(kuò)大了重量范圍，并增加了靜態(tài)和可變版本的光學(xué)尺寸。 它真的很可愛，并且從一開始就設(shè)計(jì)用于在屏幕上進(jìn)行長時(shí)閱讀。

This version features 4 different optical size versions of the static fonts, plus a variable version. They all feature a weight range of 200–900 in upright and italics. Since the Github repository only has the source files, I’ve compiled all of them as ‘woff’ and ‘woff2’ (just ‘woff2’ for the variable one) and included the entire family in case you want to use them. Note that they’ve been subset to Latin 1 Extended already, so if you need a larger character set you might have better luck building from the source files on GitHub.

此版本具有4種不同的光學(xué)尺寸的靜態(tài)字體版本，以及一個(gè)可變版本。 它們的直立和斜體重量范圍均為200–900。 由于Github存儲(chǔ)庫僅包含源文件，因此我將它們?nèi)烤幾g為“ woff”和“ woff2”(對(duì)于變量one僅為“ woff2”)，并包括整個(gè)家族，以備您使用時(shí)使用。 請(qǐng)注意，它們已經(jīng)是Latin 1 Extended的子集，因此，如果您需要更大的字符集，則可以從GitHub上的源文件構(gòu)建更好的運(yùn)氣。

The 4 optical sizes: caption (7pt), regular (12pt), deck (36pt), and display (72pt)4種光學(xué)尺寸：字幕(7pt)，常規(guī)(12pt)，卡座(36pt)和顯示屏(72pt)

精細(xì)光學(xué) (Fine optics)

The optical size static fonts are tuned for 7pt, 12pt, 36pt, and 72pt usage. I’ve opted to use them for ‘smaller than body’, ‘body text range’, ‘medium headings’, and ‘big headings’. While using these in our typesetting does then entail loading more font files, if the goal is to make the best reading experience then this is what we should do. And once we add the variable fonts, it cuts the data download and reduces the number of file requests. You can see the comparison of optical sizes alongside the variable version over on CodePen.

調(diào)整了光學(xué)尺寸的靜態(tài)字體以適應(yīng)7pt，12pt，36pt和72pt的使用。 我選擇將它們用于“小于正文”，“正文范圍”，“中等標(biāo)題”和“大標(biāo)題”。 在我們的排版中使用這些字體時(shí)，確實(shí)需要加載更多的字體文件，如果目標(biāo)是獲得最佳的閱讀體驗(yàn)，那么我們應(yīng)該這樣做。 一旦添加了可變字體，它就可以減少數(shù)據(jù)下載并減少文件請(qǐng)求的數(shù)量。 您可以在CodePen上看到光學(xué)尺寸的比較以及可變版本。

將文學(xué)作品帶入我們的文學(xué) (Bringing Literata to our literature)

If I were sticking with a more typical approach to font selection, I would likely have chosen 5 different files at most: 4 for body copy (regular, bold, italic, bold italic), and perhaps one other weight for larger headings. But since the goal is great typography, it felt like more of our overall data load could be dedicated to fonts.

如果我堅(jiān)持使用更典型的字體選擇方法，那么我最多可能會(huì)選擇5個(gè)不同的文件：4個(gè)用于正文復(fù)制(常規(guī)，粗體，斜體，粗體斜體)，也許還有另一個(gè)粗體用于較大的標(biāo)題。 但是由于目標(biāo)是出色的排版，因此感覺我們整體數(shù)據(jù)負(fù)載中的更多內(nèi)容可能專用于字體。

So I leaned in to the available optical sizes and tailored our font selections for intended size in addition to weight. This brought our font tally to 10 or so — but that’s still only around 350k of font data. When the variable font versions are loaded, it drops to only 2 requests and about 300kb of font data. Given that each chapter typically has only 2–4 images and so far we’re loading no Javascript at all, devoting some download to fonts (which are cached form page-to-page anyway) seems just fine.

因此，我依靠可用的光學(xué)尺寸，除了重量之外，還針對(duì)預(yù)期的尺寸量身定制了字體選擇。 這使我們的字體計(jì)數(shù)達(dá)到10左右-但這仍然只有350k左右的字體數(shù)據(jù)。 加載可變字體版本后，它僅下降到2個(gè)請(qǐng)求和大約300kb的字體數(shù)據(jù)。 鑒于每個(gè)章節(jié)通常只有2-4張圖片，并且到目前為止，我們根本沒有加載Java腳本，因此將一些下載內(nèi)容專門用于字體(無論如何都是逐頁緩存)。

Of note: we could have saved almost 100kb of font data if we had stripped out more of the OpenType features, but retaining true small caps, ligatures, and alternate numeral styles will be a big part of the design, so seemed a worthy tradeoff.

值得注意的是：如果我們剝離了更多OpenType功能，我們可以節(jié)省近100kb的字體數(shù)據(jù)，但是保留真正的小寫字母，連字和其他數(shù)字樣式將是設(shè)計(jì)的重要部分，因此似乎值得權(quán)衡取舍。

關(guān)于@ font-face (About @font-face)

If you take a look at the font declarations, you’ll see they’re quite extensive: I’ve included every weight (upright and italic) for every optical size, plus the two variable fonts (caniuse variable fonts support). We’re not loading all of these, but I thought it might be easier for you to be able to just copy that file and pare it down to what you want to use. A font download isn’t triggered until it’s called for in a font-family declaration, so there’s no concern about unnecessary data download.

如果您看一下字體聲明，您會(huì)發(fā)現(xiàn)它們的范圍很廣：我已經(jīng)為每種光學(xué)尺寸包括了每個(gè)粗細(xì)(垂直和斜體)，以及兩個(gè)可變字體( caniuse可變字體支持 )。 我們沒有加載所有這些文件，但是我認(rèn)為，僅復(fù)制該文件并將其縮減為您想要使用的文件可能會(huì)更容易。 除非在字體家族聲明中要求調(diào)用字體下載，否則不會(huì)觸發(fā)該字體下載，因此無需擔(dān)心不必要的數(shù)據(jù)下載。

In order to then use the fonts in our styles, we’ll continue with our practice of progressive enhancement: first we declare the static fonts (with fallbacks), then we include an ‘@supports’ block to layer in the variable fonts. Since CSS has to be parsed first before anything else happens, the browser will never download both static and variable versions referenced in the same selector.

為了然后在樣式中使用字體，我們將繼續(xù)進(jìn)行漸進(jìn)增強(qiáng)的做法：首先，聲明靜態(tài)字體(帶有后備)，然后在可變字體中逐層添加'@supports'塊。 由于必須先解析CSS，然后才能進(jìn)行其他操作，因此瀏覽器將永遠(yuǎn)不會(huì)下載在同一選擇器中引用的靜態(tài)和可變版本。

h1 {
--text-opsz: var(--h1-opsz-l);
font-family: "Literata Display", Georgia, "Times New Roman", serif;
font-weight: 300;
}
/* Load variable fonts instead for browsers that can render them */
@supports (font-variation-settings: normal) {
h1 {
font-family: "Literata Variable", Georgia, "Times New Roman", serif;
font-variation-settings: "opsz" var(--text-opsz);
font-weight: 250;
}
}

是時(shí)候出汗一些細(xì)節(jié)了 (Time to sweat some details)

Now that we’re loading the right fonts we can revisit the typography overall and make some adjustments. Since we now have a much wider weight range and a set of optical sizes to work with, we can set about using that vocabulary. I decided to play with the extremes of weight with the book title and chapter titles: 900 weight on the former, but only 250 for chapter titles.

現(xiàn)在，我們正在加載正確的字體，我們可以整體重新查看字體并進(jìn)行一些調(diào)整。 由于我們現(xiàn)在的重量范圍更廣，可以使用一組光學(xué)尺寸，因此可以著手使用該詞匯表。 我決定在書名和章標(biāo)題中發(fā)揮極端的作用：前者重900，而章標(biāo)題重250。

Note the weight range between title and author, and the ligature on the ‘st’ in the word ‘Illustrations’注意標(biāo)題和作者之間的權(quán)重范圍，以及“插圖”一詞中“ st”的連字

This, coupled with the highest value for optical size, gives a really distinctive feel and let me make the headings even a bit bigger without feeling overwhelming. I also enabled discretionary ligatures for headings so we can get those lovely connecting strokes between lower case ’st’ and ‘ct’ (among others).

加上最大的光學(xué)尺寸，給人一種真正獨(dú)特的感覺，讓我在不感到不知所措的情況下使航向變得更大。 我還為標(biāo)題啟用了任意連字，這樣我們就可以在小寫的“ st”和“ ct”(以及其他)之間獲得可愛的連接筆觸。

h2 {
font-family: "Literata Deck", Georgia, "Times New Roman", Times, serif;
font-variant-ligatures: common-ligatures discretionary-ligatures;
}

You can also see below in the styles for the first line of the paragraph that we’re utilizing a slightly different weight and true small caps for the first line. Since we’re using the OpenType feature to get the small caps, we already have some emphasis on that first line. I wanted the type to stand apart, but using the bold weight as well was a little too much. So where we’re using the variable font we’re able to tailor the weight a bit and call for 525 rather than 625 (the weight we’re using for bold). These values are for the variable fonts; we’re calling for 500 and 600 weights in the static files.

您還可以在以下段落的第一行樣式中看到，我們?cè)诘谝恍兄惺褂昧松杂胁煌拇旨?xì)和真正的小寫字母。 由于我們使用的是OpenType功能來獲取小寫字母，因此我們已經(jīng)在第一行進(jìn)行了一些強(qiáng)調(diào)。 我希望該類型能夠脫穎而出，但同時(shí)使用大膽的重量也太多了。 因此，在使用可變字體的地方，我們可以略微調(diào)整粗細(xì)，并要求525而不是625(粗體使用的粗細(xì))。 這些值適用于可變字體。 我們?cè)陟o態(tài)文件中要求500和600權(quán)重。

strong {
font-weight: 600;
}
@supports (font-variation-settings: normal) {
strong {
font-weight: 625;
}
}.chapter > p:first-of-type::first-line {
font-variant-caps: small-caps;
font-weight: 500;
}
@supports (font-variation-settings: normal) {
.chapter > p:first-of-type::first-line {
font-weight: 525;
}
}

但這是“書本式”的嗎？ (But is it ‘book-ish’ yet?)

Overall, even with just a couple of minor changes, the whole feel of the project has taken big leap forward. But it didn’t feel done. I started to think more on what would make it feel more like a book, so I went back to look at a few in print and electronic form. Thankfully I had three I really like in both formats to look at in greater detail.

總體而言，即使只進(jìn)行了一些小改動(dòng)，項(xiàng)目的整體感覺還是有了很大的飛躍。 但這并沒有完成。 我開始更多地考慮使它看起來更像一本書，因此我回頭看了一些印刷版和電子版。 值得慶幸的是，我有兩種非常喜歡的格式，可以更詳細(xì)地介紹。

Starting on the smallest screens, I honed in on a few specific aspects of the design that needed some attention: margins, line-height, and weight. Typically the three aspects of paragraph design that form the basis of good typography are font-size, line-height, and line-length. Since I didn’t want to reduce the font size below a default 100% size, I thought I’d look at font-weight instead; and since the focus initially was on the smallest screens, line-length was going to be dictated by margins.

從最小的屏幕開始，我研究了設(shè)計(jì)中需要注意的一些特定方面：頁邊距，線條高度和重量。 通常，構(gòu)成良好字體的基礎(chǔ)的段落設(shè)計(jì)的三個(gè)方面是字體大小，行高和行長。 因?yàn)槲也幌雽⒆煮w大小減小到默認(rèn)的100％以下，所以我認(rèn)為應(yīng)該改用font-weight； 由于最初的重點(diǎn)是最小的屏幕，因此行長將由邊距決定。

As I mentioned, three eBooks stood out to me from ones in my collection: Web Typography by Rich Rutter and The Shape of Design by Frank Chimero (both on iBooks), and The Book by Keith Houston on Kindle. I’m not sure that I felt any of them were exactly what I was looking for, but their differences gave me a lot to think about. Some margins felt too big, some type choices felt heavier or lighter than I wanted. But all in all significantly better than most I’d seen.

正如我提到的那樣，三本電子書從我的收藏集中脫穎而出：Rich Rutter的Web印刷術(shù)和Frank Chimero的The Shape of Design (均在iBooks上)，以及Keith Houston的The Book在Kindle上。 我不確定我是否真的想找到他們中的任何一個(gè)，但是他們之間的差異給了我很多考慮。 有些頁邊距感覺太大，有些字體選擇比我想要的重或輕。 但是總的來說，它比我見過的大多數(shù)要好得多。

From left: The Book (Kindle version), The Shape of Design, and Web Typography (both iBook versions)從左起：The Book(Kindle版本)，The Shape of Design和Web Typography(兩個(gè)iBook版本)

So the challenge was to look at these examples, decide what I liked best about them, and then try to adjust the settings on our typography to get a result that felt right for our project. I wanted to maintain roughly 45 characters per line if possible (on a recent iPhone ’non-plus’ size), so I increased the margins a bit. That felt better, but vertically it was still a little cramped so I opened up the line-height a bit too. Finally, since we have the variable font to play with I tried reducing the weight just a little bit from 400 to 385. This lightened the overall color just a tiny bit, and taken all together seemed to really refines the overall design.

因此，面臨的挑戰(zhàn)是看這些示例，確定我最喜歡的示例，然后嘗試調(diào)整排版上的設(shè)置，以獲得適合我們項(xiàng)目的結(jié)果。 我想盡可能保持每行大約45個(gè)字符(在最近的iPhone“非加”尺寸上)，因此我增加了邊距。 感覺更好，但是垂直方向還是有點(diǎn)局促，所以我也稍微打開了行高。 最后，由于我們可以使用可變字體，因此我嘗試將重量從400減少到385。這使整體顏色稍微減輕了一點(diǎn)，并且總的來說似乎確實(shí)改善了整體設(shè)計(jì)。

Better margins, line-height, and font-weight coupled with having true small caps makes the design feel a bit more refined and the reading experience more comfortable更好的頁邊距，行高和字體粗細(xì)，再加上真正的小寫字母，使設(shè)計(jì)更精致，閱讀體驗(yàn)更舒適

One of the things you might notice in comparing these two is that the font size appears different. That’s actually not true: both are set to a default 100% or 1rem. But the more generous x-height and optical size corrections on the right make the text more open and legible. It does have an impact on line length, but regardless the feel is much more comfortable.

比較這兩者時(shí)，您可能會(huì)注意到的一件事是字體大小看起來有所不同。 這實(shí)際上是不正確的：兩者都設(shè)置為默認(rèn)值100％或1rem。 但是，右側(cè)的x高度和光學(xué)尺寸更慷慨的校正使文本更加開放和清晰。 它確實(shí)會(huì)影響線長，但是無論感覺如何都舒適得多。

Overall I’m really excited with how this is looking, and am enjoying the reading experience. I spent a little more time updating the header and footer, and turned the end mark into an SVG so we can recolor it more readily. I’ve also added some additional artwork for chapters 2 and 3. That will be an ongoing process, and I still want to work out a better solution for making the images responsive. That should be something I can work out at the template level so hopefully will be a more site-wide update in the coming weeks.

總的來說，我對(duì)它的外觀感到非常興奮，并享受閱讀體驗(yàn)。 我花了一些時(shí)間來更新頁眉和頁腳，并將結(jié)束標(biāo)記轉(zhuǎn)換為SVG，以便我們可以更輕松地為其重新著色。 我還為第2章和第3章添加了一些其他插圖。這將是一個(gè)持續(xù)的過程，我仍然想為使圖像具有響應(yīng)性而提出一個(gè)更好的解決方案。 這應(yīng)該是我可以在模板級(jí)別解決的問題，因此希望在未來幾周內(nèi)進(jìn)行更多站點(diǎn)范圍的更新。

Next week we’ll get into one of the most frequently overlooked performance and rendering bottlenecks: font loading management and styling our fallback fonts for a better experience during the page loading process.

下周，我們將探討最常被忽視的性能和渲染瓶頸之一：字體加載管理和樣式化后備字體，以便在頁面加載過程中獲得更好的體驗(yàn)。

資源資源 (Resources)

• Latest live version at mobydick.wales

  最新的實(shí)時(shí)版本位于mobydick.wales

• Source code on GitHub

  GitHub上的源代碼

• Literata on TypeTogether, GitHub, and Google Fonts

  TypeTogether ， GitHub和Google Fonts上的文檔

• Optical size explained

  光學(xué)尺寸說明

• Literata optical size demo on CodePen

  CodePen上的Literata光學(xué)尺寸演示

• Web Typography by Rich Rutter

  網(wǎng)頁排版由Rich Rutter

• The Shape of Design by Frank Chimero

  Frank Chimero 設(shè)計(jì)的形狀

• The Book by Keith Houston

  基思·休斯頓的書

• Part 1: Introducing the project

  第1部分：項(xiàng)目介紹

• Part 2: Responsive typography

  第2部分：響應(yīng)式排版

This is an excerpt from my weekly newsletter about web fonts and typography. If you’d like a weekly dose of web typography tips, news, and my upcoming talks and workshops, you can sign up for the newsletter here.

這是我關(guān)于網(wǎng)絡(luò)字體和排版的每周新聞?wù)?如果您希望每周獲得大量的網(wǎng)絡(luò)排版技巧，新聞以及我即將舉行的講座和研討會(huì)，則可以 在此處注冊(cè)新聞通訊 。

If you this helpful, please share what you make — and if there’s something you’d like to see covered in a future issue, please let me know!

如果您有幫助，請(qǐng)分享您的工作-如果您希望在以后的期刊中看到一些內(nèi)容，請(qǐng)告訴我！

Originally published at rwt.io on May 4, 2020.

最初于 2020 年5月4日 在 rwt.io 上 發(fā)布 。

翻譯自: https://medium.com/web-typography-news/part-3-adding-web-fonts-giving-voice-to-our-words-8ecf46eb4d37

怎么讓qt發(fā)聲

總結(jié)

以上是生活随笔為你收集整理的怎么让qt发声_第3部分：添加网络字体-让我们的单词发声的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。