В обход Clear Type на веб-странице - PullRequest
Новая
       44

В обход Clear Type на веб-странице

0 голосов
/ 20 октября 2018

Я пытаюсь имитировать текст в статьях на сайте desiringgod.org.Они используют шрифт Merriweather темно-серого цвета для основного текста на белом фоне.

Когда я размещаю на своем веб-сайте те же настройки, текст выглядит не так гладко и темнее.Я проверил весь CSS и даже просмотрел некоторые javascript, чтобы убедиться, что все было одинаково, и посмотреть, происходит ли что-то особенное.Я не вижу ничего, что могло бы объяснить разницу.(у меня другая высота линии, но это не должно иметь значения).Я даже попытался загрузить их шрифт WOFF2 только для того, чтобы увидеть, имеет ли это значение (в отличие от использования одного из Google), и это тоже ничего не изменило.

Затем я сделал снимок экрана частитекст на каждой странице (у них и у меня).Поднося его в фотошоп, я заметил, что для того, кто пришел с сайта желающего бога, фотошоп определил, что изображение в буфере обмена было серым, но для моего оно определило, что это RGB.Затем, присмотревшись поближе, я заметил, что кажется, что на мою страницу влияет ClearType на окнах, а желающий бог - нет.Если вы увеличите образцы ниже, вы увидите цветное сглаживание, типичное для cleartype на моем, и серое сглаживание на их.

Есть ли какой-нибудь способ, который мог бы быть возможным?Есть ли способ остановить это?Текст о желающем боге более приятен для чтения, и мне хотелось бы того же эффекта.

DG Website My Website

Ответы [ 2 ]

0 голосов
/ 20 октября 2018

Потратив слишком много часов на что-то, что на самом деле не выглядит так уж по-другому, я наконец понял это.Вот так ...

Они поместили этот класс на один из контейнеров с текстом: 

.gpu {
backface-visibility: hidden;
perspective: 1000}

Как только я сделал это для своего контейнера, все сглаживание было в оттенках серого.

enter image description here

0 голосов
/ 20 октября 2018

Как вы можете видеть, они немного отличаются от версии Google Merriweather. 

/* latin */

@font-face {
  font-family: 'Merriweather Google';
  src: url(https://fonts.gstatic.com/s/merriweather/v19/u-440qyriQwlOrhSvowK_l5-fCZM.woff2) format('woff2');
}
@font-face {
  font-family: 'Merriweather Desiring';
  src: url(https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/merriweather-v11-latin-300.64e603fa.woff2) format('woff2');
}
p.google {
  font-family: "Merriweather Google";
}
p.desiring {
  font-family: "Merriweather Desiring";
}
p {
  font-size: 18px;
  font-weight: 300;
  line-height: 180%;
  letter-spacing: normal;
  max-width: 700px;
  border-bottom-color: rgb(51, 51, 51);
  border-bottom-style:none;
  border-bottom-width: 0px;
  color: rgb(51, 51, 51);
  vertical-align:baseline;
  width:700px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">

<p class="google">That’s not right. </p>
<p class="desiring">That’s not right. </p>
...