css版式

The feedback I’ve received over the past week has been amazing, and matches my own excitement about this project. I’ve spent a lot of time researching, writing, and teaching about creating better typography for reading on digital devices over the years. This is the chance to put it all together and focus on the whole reading experience beyond just the typesetting.

在過去一周中，我收到的反饋令人驚訝，并且與我對這個項目的興奮之情相吻合。 多年來，我花費了大量時間進行研究，寫作和教學，以創建更好的字體以在數字設備上閱讀。 這是將所有內容放在一起并專注于整個閱讀體驗的機會，而不僅僅是排版。

I also tracked down and bought my own copy of that Rockwell Kent edition on eBay and picked up what might be the most perfect domain name for the project I could imagine.

我還追蹤并在eBay上購買了自己的羅克韋爾·肯特(Rockwell Kent)版本，并找到了我能想象到的最完美的域名。

Let’s be honest: what top level domain could possibly be better for Moby-Dick than… wait for it… ‘.wales’ (all due respect to Mark and Emma Boulton and everyone else who actually live there). So from here on out you can read the book at it’s new home mobydick.wales.

坦白說：對于Moby-Dick來說，哪個頂級域名可能比……等等……“ .wales ”(所有人都應尊重Mark和Emma Boulton以及實際上居住在那里的其他所有人)。 因此，從現在開始，您可以在新家mobydick.wales上閱讀這本書。

This installment covers a lot of ground, so let’s start with a recap of the overall goals and the basics we put in place last week.

本期文章涵蓋了很多領域，因此讓我們首先回顧一下我們上周制定的總體目標和基礎知識 。

我們旨在實現的目標 (What we aim to accomplish)

Great typography on the web should be designed in layers. The web is an imperfect medium, consumed by countless different devices over untold numbers of network connections — each with their own capabilities, limitations, and peculiarities. To think that you can create one solution that will look and work the same everywhere is a fantasy. To make this more than just one nice book website, the whole project and process needs to embrace this reality. So here are some guiding principles.

Web上的出色排版應分層設計。 Web是一種不完善的介質，無數不同的設備通過無數的網絡連接使用了每種介質-每個都有自己的功能，局限性和特殊性。 認為您可以創建一個在任何地方看起來和工作都一樣的解決方案是一種幻想。 為了使這不僅僅是一個好書的網站，整個項目和過程都需要接受這一現實。 因此，這里有一些指導原則。

Semantics — Start with well-written HTML. I’ve done my best to alter the underlying HTML of the text as little as possible. This also means that when using these techniques with a CMS, you won’t have to rely upon content authors doing a lot of fiddly custom formatting or code.

語義 -從編寫良好HTML開始。 我已盡力減少了文本的底層HTML。 這也意味著，將這些技術與CMS配合使用時，您將不必依賴內容編寫者進行大量自定義格式或代碼的操作。

Foundations — Start with typography that will look and work great even if web fonts don’t load. You can establish a lot of good typography with basic CSS and commonly installed fonts like Georgia.

基礎 -從排版開始，即使不加載Web字體，外觀和效果也很好。 您可以使用基本CSS和常用安裝的字體(例如Georgia)來建立許多好的字體。

Progressive enhancement — Once we have the basics covered, we can add our web fonts of choice. We’ll start with static or traditional web fonts as those are supported by the most browsers. Then we’ll add variable fonts for browsers that support them. In every place we can, we will support older browsers and less fully-featured devices, and layer in support for newer and more robust ones. This goes for CSS techniques, typographic scale, and layout choices in addition to those around fonts and font technologies.

漸進式增強 —涵蓋了基礎知識之后，我們可以添加我們選擇的Web字體。 我們將從大多數瀏覽器支持的靜態或傳統Web字體開始。 然后，我們將為支持可變字體的瀏覽器添加可變字體。 我們將在任何可能的地方都支持較舊的瀏覽器和功能較差的設備，并支持更新和更強大的瀏覽器。 除字體和字體技術外，這還適用于CSS技術，印刷比例尺和布局選擇。

Performance — You have about 3 seconds to get your content on screen before visitors bail. By using ‘font-display: swap’ and a web font loader we can not only improve the page-to-page performance, but we can also smooth out the initial experience. By adding styles to fallback fonts we can get content on screen immediately while web fonts are loading, and minimize disruption or reflow once they do.

性能 -在訪客保釋之前，您有大約3秒鐘的時間將內容顯示在屏幕上。 通過使用“字體顯示：交換”和網絡字體加載器，我們不僅可以提高頁面到頁面的性能，而且還可以使初始體驗更加流暢。 通過為后備字體添加樣式，我們可以在加載Web字體時立即在屏幕上顯示內容，并最大程度地減少干擾或回流。

Offline — Embracing the offline access techniques and technologies behind Progressive Web Apps helps improve overall performance and resilience by reducing the need to hit the network at all. And with books that means it can behave more like a traditional ebook.

脫機 -在漸進式Web應用程序背后采用脫機訪問技術和技術，可通過減少根本不打入網絡的需求來幫助提高整體性能和彈性。 而對于書籍而言，這意味著它的行為更像傳統的電子書。

Reader’s choice — Supporting different light modes, spacing, font size — these are all well supported in CSS. Making it part of our process is good for user experience, good for accessibility, and good for project portability too.

讀者的選擇 -支持不同的燈光模式，間距，字體大小-CSS都很好地支持了這些。 使其成為我們流程的一部分，既有益于用戶體驗，也有利于可訪問性，也有利于項目的可移植性。

Book-ishness — This is perhaps the one part of this effort that is really specific to the project at hand: creating a web-based book. My hope is that we’ll see just how much further we can push that experience and tailor it for multiple kinds of devices and inputs.

書本化 -這也許是這項工作中真正針對手頭項目的一部分：創建基于網絡的書本。 我的希望是，我們將看到我們可以進一步推廣這種經驗，并針對多種設備和輸入量身定制。

到目前為止我們所做的 (What we’ve done so far)

Last week was largely about just getting the text of the book into website form. We broke up the text into separate documents for each chapter, brought it into a site generator to make the maintenance a bit easier, and added navigation to get back and forth between chapters. We also set up some basic typographic choices:

上周主要是將書中的文字變成網站形式。 我們將每一章的文本分為不同的文檔，將其帶到站點生成器中以使維護更加容易，并添加了導航以在各章之間來回切換。 我們還設置了一些基本的印刷選擇：

• Set font sizes for hierarchy between headings and body copy
  設置標題和正文之間的層次結構的字體大小
• Set line-height to help establish vertical spacing
  設置線高以幫助建立垂直間距
• Set a maximum width on content to maintain a readable line length
  設置內容的最大寬度以保持可讀的行長
• Decided on text-indent rather than spacing for paragraphs, as we’re designing for longer-form reading rather than a more typical skimming behavior
  決定文本縮進，而不是段落間距，因為我們正在設計較長格式的閱讀，而不是更典型的略讀行為

These choices were ok to start, but far from ideal across device sizes. This week we’re taking it a whole lot farther.

這些選擇可以開始，但是在各種設備尺寸上都不理想。 這周我們要走的更遠。

第2部分：響應式排版和項目基礎 (Part 2: Responsive typography and project foundations)

There’s actually a lot more going on than just setting up the responsiveness of the typographic system, so I’ll break it up into three different sections:

實際上，除了設置印刷系統的響應能力之外，還有很多事情要做，所以我將其分為三個不同的部分：

• Typography
  版式
• User interface and content
  用戶界面和內容
• Code scaffolding and approach
  代碼腳手架和方法

響應式排版 (Responsive typography)

Typographic hierarchy is all about proportion. And when screen size changes, the specifics of those proportions should change too. Small screens like phones show less text, so we don’t need to exaggerate the scale differences between headings and body copy quite as much. They also pose different challenges with regard to line length with larger headings, and rag irregularities in the body (in left-to-right reading languages, that’s the uneven right-hand edge of the text). It’s part preference, part practicality to leave the text ‘rag-right’: justification (making both edges of the text even) doesn’t work well on the web, especially on small screens. My preference is to use hyphenation and a ragged right edge.

印刷層次結構完全與比例有關。 當屏幕尺寸改變時，這些比例的細節也應改變。 像電話這樣的小屏幕上顯示的文字較少，因此我們無需過多地夸大標題和正文之間的比例差異。 對于較大標題的行長和正文中的碎布不規則(在從左到右的閱讀語言中，這是文本的不均勻右邊緣)，它們也帶來了不同的挑戰。 讓文本“從右到右”是部分偏愛，也是部分實用性：對齊(使文本的兩個邊緣均勻)在Web上效果不佳，尤其是在小屏幕上。 我的偏好是使用連字符和參差不齊的右邊緣。

Both heading and body copy sizes are scaled appropriately for the screen on which they’re viewed標題和正文副本的大小都針對在其上查看的屏幕進行了適當縮放

By using media queries, we can tailor the typographic scale differently across screen sizes and even turn hyphenation on for body copy on smaller screens. This way we can have more readable headings that still stand out on our phones, and create more balanced body copy without resorting to reducing font size. As screens get larger we can turn off the hyphenation as we won’t really need it there to balance the design. On those larger screens we’ll set our headings bigger, as they have more to compete with as windows get wider and layouts get busier.

通過使用媒體查詢，我們可以跨屏幕尺寸不同地調整印刷比例，甚至在較小的屏幕上打開連字符以進行正文復制。 這樣，我們可以使手機上的標題仍然更具可讀性，并在不求助于減小字體大小的情況下，創建更加平衡的正文。 隨著屏幕變大，我們可以關閉連字符，因為我們實際上并不需要它來平衡設計。 在更大的屏幕上，我們將標題設置為更大，因為隨著窗口變寬和布局變得更忙，它們將具有更多的競爭力。

h1 {
font-size: 2.25rem;
...
/* Mid-size screens */
@media screen and (min-width: 42em) {
font-size: 3rem;
...
}
/* Larger screens */
@media screen and (min-width: 60em) {
font-size: 4rem;
...
}
}p {
font-size: 1rem;
...
/* Mid-size screens */
@media screen and (min-width: 42em) {
font-size: 1.125rem;
...
}
/* Larger screens */
@media screen and (min-width: 60em) {
font-size: 1.25rem;
...
}
}

We’ve started out by establishing a simple small/medium/large sort of scale, and applied that to headings and body copy — but have scaled those elements differently. This roughly corresponds to phone, tablet, and desktop — but it’s really about window size and resolution here more than the specifics of the device.

我們首先建立了一個簡單的小/中/大比例尺，并將其應用于標題和正文，但這些元素的比例不同。 這大致對應于手機，平板電腦和臺式機-但實際上，此處的窗口大小和分辨率遠比設備的具體特性重要。

Some tweaks to font size and layout for small screen and large對小屏幕和大屏幕的字體大小和布局進行一些調整

I also tweaked some of the margins and the text styles for the header and footer to improve the experience across the range of device sizes. That brings us to the user interface.

我還調整了頁眉和頁腳的一些邊距和文本樣式，以改善跨各種設備尺寸的體驗。 這將我們帶到用戶界面。

UI更新以及內容調整和添加 (UI updates and content tweaks and additions)

After viewing the project on my iPhone 11 (the smaller one) I wanted to make sure the baseline experience was better for smaller screens. I tweaked the alignment and scale of the chapter navigation in the header, reduced the font size and margins in the footer, and updated the previous/next chapter navigation.

在iPhone 11(較小的iPhone)上查看了項目之后，我想確保基線經驗對于較小的屏幕更好。 我調整了標題中章節導航的對齊方式和比例，減小了頁腳的字體大小和頁邊距，并更新了上一章/下一章的導航。

Since the Rockwell Kent edition showed up late last week, I also photographed some of the images and added them to the site. Since they’re such a big part of what I find so compelling, I wanted to get a few in and work on the baseline image styles. They’re all black-and-white and there aren’t that many per chapter so it’s not as beneficial to set up responsive images, but I do want to have good markup and ‘alt’ text. I set up enough styles to give some flexibility for size and alignment as well.

自從上周下半年羅克韋爾·肯特(Rockwell Kent)版本出現以來，我還拍攝了一些圖像并將其添加到該站點。 由于它們是我認為如此引人注目的很大一部分，因此我想了解一些并從事基線圖像樣式的研究。 它們都是黑白的，每章沒有那么多，因此設置響應圖像并不是那么有益，但是我確實希望擁有良好的標記和“ alt”文本。 我設置了足夠的樣式，以便為尺寸和對齊方式提供一些靈活性。

Illustration of the deck plan from the table of contents in the book and on the web書中和網上目錄中的甲板平面圖插圖

One of the only significant change I made to the HTML I got from Project Gutenberg was the addition of blockquotes. There was a bit of a mishmash in Extracts that looked like it would benefit from that kind of structure, so I went through and marked them all up consistently. Since there were two different kinds of usage I created a ‘quiet’ style that kept text size in line with the surrounding text, and a more normal one that was a bit bigger and set off from its surroundings. It may require more refinement in the future but for now it’s made for a nice improvement.

我從古騰堡計劃中獲得HTML所做的唯一重大更改之一就是添加了blockquotes。 提取物中有一些雜燴，看起來可以從這種結構中受益，所以我仔細研究了一下，并將它們全部標記為一致。 由于存在兩種不同的用法，因此我創建了一種“安靜”的樣式，使文本大小與周圍的文本保持一致，并創建了一種更普通的樣式，該樣式稍大一些并與周圍的環境偏離。 將來可能需要進一步完善，但現在已經進行了很好的改進。

代碼腳手架和方法 (Code scaffolding and approach)

In keeping with our goal of supporting the widest possible spectrum of devices, network capabilities, screen sizes, and coding approaches, the project is set up with a layered approach. If you install and build the project from the source, you’ll see how that works end-to-end. If you just grab the compiled site (from in the ‘_site’ directory), you’ll still see a fair bit. Here’s how it’s set up.

為了滿足我們支持盡可能廣泛的設備，網絡功能，屏幕尺寸和編碼方法的目標，該項目采用分層方法進行設置。 如果從源代碼安裝和構建項目，您將看到端到端的工作方式。 如果您只是從(_site)目錄中獲取已編譯的站點，您仍然會看到一點點。 設置方法如下。

In order to support browsers that don’t ‘get’ custom properties, I’ve set up the project with a layered approach. Since I’m using Sass, I’ve set up a two-step process to define variables in Sass, which then also supplied to the definition of corresponding CSS custom properties. This way we can use the staticky compiled Sass variables in the initial declarations for font size, line-height, color, etc., and then redeclare them with the custom properties so we can alter them more easily in the future. I included a couple of extra transformations in order to keep it simple at the outset: just supply pixel values in the variables file and they’ll be converted to ‘rem’ or ‘em’ values as needed for the most flexible results in our final output.

為了支持不“獲取”自定義屬性的瀏覽器，我使用分層方法設置了項目。 由于我正在使用Sass，因此我建立了一個兩步過程來定義Sass中的變量，然后還將其提供給相應CSS自定義屬性的定義。 這樣，我們就可以在字體大小，行高，顏色等初始聲明中使用staticky編譯的Sass變量，然后使用自定義屬性重新聲明它們，以便將來更輕松地對其進行更改。 為了使它從一開始就保持簡單，我添加了一些額外的轉換：只需在變量文件中提供像素值，它們就會根據需要轉換為'rem'或'em'值，以實現最終結果中最靈活的結果輸出。

/* Change px values here for all font sizing */
$p-size-s-px: 16;
$p-size-m-px: 18;
$p-size-l-px: 20;/* Font size rem values (needed for dynamic sizing) */
$p-size-s-value: $p-size-s-px / $text-base-size;
$p-size-m-value: $p-size-m-px / $text-base-size;
$p-size-l-value: $p-size-l-px / $text-base-size;
/* Font sizes in rems */
$p-size-s: $p-size-s-value * 1rem;
$p-size-m: $p-size-m-value * 1rem;
$p-size-l: $p-size-l-value * 1rem;/* CSS custom properties for all modern browsers */
:root {
--p-size-s-value: #{$p-size-s-value};
--p-size-m-value: #{$p-size-m-value};
--p-size-l-value: #{$p-size-l-value}; --p-size-s: #{$p-size-s-value * 1rem};
--p-size-m: #{$p-size-m-value * 1rem};
--p-size-l: #{$p-size-l-value * 1rem};
}

I’ve also set up functional assignments for color usage. It’s easier to change the color palette and only one place to update the color assignment. By having everything mapped from a specific color to ‘text color’ or ‘background color’ variables, it’s also easier to change those palette assignments for dark mode or a higher contrast setting.

我還為顏色使用設置了功能分配。 更改調色板更容易，而只需一個地方即可更新顏色分配。 通過將所有內容從特定顏色映射到“文本顏色”或“背景顏色”變量，可以更輕松地將那些調色板分配更改為暗模式或更高的對比度設置。

Corresponding to the responsive typographic scale shown above, the text size and line-height variables are in sets of three values for smallest, mid-range, and largest values.

對應于上面顯示的響應式印刷比例，文本大小和行高變量在三個值的集合中，分別代表最小值，中間范圍和最大值。

到目前為止的進展 (Progress so far)

While we did have to do a fair bit of plumbing and foundational work, I hope it’s clearer now just how much we can do typographically without even loading a single web font. We now have the entire book comfortably readable on virtually any device, and we’re starting to get some of the artwork in and refinements in place that help make it a book instead of simply a collection of pages.

盡管我們確實需要做一些基礎工作，但我希望現在可以清楚地知道即使不加載單個Web字體，我們也可以進行印刷工作。 現在，我們幾乎可以在任何設備上舒適地閱讀整本書，并且我們開始獲取一些插圖和適當的改進信息，以幫助使它成為一本書，而不僅僅是頁面的集合。

Starting to look a bit more polished on big screen and small在大屏幕和小屏幕上開始看起來更加精致

Next time we’ll be adding web fonts — and I’m really excited to show you a brand-new release. I’ve had the chance to work with it over the last couple months quite a bit, but it’s only now become public.

下次我們將添加Web字體-非常高興為您展示一個全新的版本。 在過去的幾個月中，我有很多與之合作的機會，但現在才公開。

資源資源 (Resources)

• View at the new URL mobydick.wales

  在新的URL上查看mobydick.wales

• Project source on GitHub

  GitHub上的項目源

• Resilient Web Design (a wonderful web-based book by Jeremy Keith, and inspiration in both content and execution)

  彈性Web設計 (Jeremy Keith撰寫的精彩的基于Web的書，內容和執行方面都有靈感)

• Got an email from fellow community member Justin with links to Oliver Byrne’s online edition of The Elements Euclid and Justin’s own edition of A Briefer History of Time. I’d seen the former, but not the latter. Great stuff!

  從社區成員賈斯汀那里收到了一封電子郵件，其中包含奧利弗·伯恩(Oliver Byrne)在線版的《元素歐幾里得》和賈斯汀自己的《時間簡史》的鏈接 。 我見過前者，但沒有見過。 好東西！

• Part 1: Introducing the project

  第1部分：項目介紹

• Part 3: Adding web fonts

  第3部分：添加網絡字體

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.

這是我關于網絡字體和排版的每周新聞摘要。 如果您希望每周獲得大量的網絡排版技巧，新聞以及我即將舉行的講座和研討會，則可以 在此處注冊新聞通訊 。

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!

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

Originally published at rwt.io on April 20, 2020.

最初于 2020 年4月20日 在 rwt.io 上 發布 。

翻譯自: https://medium.com/web-typography-news/part-2-making-the-typography-responsive-and-laying-foundations-for-more-to-come-36494f4477d6

css版式

總結

以上是生活随笔為你收集整理的css版式_第2部分：使版式具有响应能力，并为以后的版本奠定基础的全部內容，希望文章能夠幫你解決所遇到的問題。

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