html - CSS 修改不适用于亚马逊 Kindle 云阅读器

标签 html css fonts

Kindle Cloud Reader 默认使用的字体是Georgia,在Windows ClearType 的渲染下显示的很惨。使用 @font-face 通常是换出特定字体系列的简单方法。在这里,我使用了 Google Fonts 的 CSS 脚本,替换了 font-family 值以使用 Bitter 而不是 Georgia,并将其附加到带有 User CSS Chrome 扩展程序的网站。

/* latin */
@font-face {
  font-family: 'Georgia';
  font-style: italic;
  font-weight: 400;
  src: local('Bitter Italic'), local('Bitter-Italic'), url(https://fonts.gstatic.com/s/bitter/v12/-t3SK6sofTjAH0MNf_tLaPesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
}

/* latin */
@font-face {
  font-family: 'Georgia';
  font-style: normal;
  font-weight: 400;
  src: local('Bitter Regular'), local('Bitter-Regular'), url(https://fonts.gstatic.com/s/bitter/v12/zfs6I-5mjWQ3nxqccMoL2A.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
}

/* latin */
@font-face {
  font-family: 'Georgia';
  font-style: normal;
  font-weight: 700;
  src: local('Bitter Bold'), local('Bitter-Bold'), url(https://fonts.gstatic.com/s/bitter/v12/evC1haE-MsorTl_A7_uSGVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
}

类似的脚本适用于无数网站。但是,它不适用于 Amazon Kindle Cloud Reader。在检查元素工具中手动更改字体系列值将不起作用。为更改 Kindle Cloud Reader 上的字体而创建的时尚样式或 Greasemonkey 脚本也不起作用。

有人可以尝试修改 Kindle 云阅读器中的字体吗?

最佳答案

如果您使用 Chrome,您可以获得一个名为 Force Custom Fonts 的网络扩展。我现在正在 Kindle Cloud Reader 中使用我最喜欢的打字机字体。诀窍是,一旦您在四个字段中分别设置了字体系列,点击保存并关闭选项页面。然后当您打开 Kindle Cloud Reader 时它就会正常工作。

关于html - CSS 修改不适用于亚马逊 Kindle 云阅读器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48467695/

相关文章:

html - IE7向左浮动和堆叠问题

javascript - 在 HTML 中使用 JS 的两个不同的用户和密码

javascript - 从下拉列表中选择后显示图像

css - 在本地托管时不显示 Google 字体

android - 为什么有些网站免费提供字体,而有些网站却要您付费才能使用相同的字体?

html - 内跨溢出超过外跨

html - 复选框和标签对齐

javascript - Bootstrap 3 Tabs,事件选项卡仅在 firefox 中悬停时闪烁

html - Bootstrap 列的中心内容

swift -\u{...} 转义序列中的预期 '}'