开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

谷歌说“文本太小，无法阅读”，但没有关于推荐字体大小的信息？

谷歌说“文本太小，无法阅读”，但没有关于推荐字体大小的信息。在网页设计中，字体大小是一个重要的考虑因素，它直接影响到用户的阅读体验和可访问性。虽然谷歌没有提供具体的推荐字体大小，但我们可以根据一般的设计原则和最佳实践来确定适合的字体大小。

在前端开发中，常用的字体大小单位是像素（px）或相对单位（如em、rem）。以下是一些参考建议：

标题：标题通常需要更大的字体来吸引用户的注意力和传达重要信息。一般来说，标题的字体大小可以设置为18px或更大，具体大小取决于设计需求和页面布局。
正文文本：正文文本的字体大小应该适中，以确保易读性和舒适的阅读体验。一般来说，正文文本的字体大小可以设置为14px到16px之间。
导航菜单和链接：导航菜单和链接通常需要更大的字体大小，以便用户能够轻松点击和导航。一般来说，导航菜单和链接的字体大小可以设置为16px到18px之间。
响应式设计：在移动设备上，由于屏幕较小，字体大小可能需要相应调整。可以使用媒体查询和响应式设计技术来根据设备屏幕大小动态调整字体大小。

总之，选择合适的字体大小需要考虑用户体验、可读性和设计需求。在实际开发中，可以根据具体情况进行调整和优化。

腾讯云相关产品和产品介绍链接地址：

腾讯云字体库：提供丰富的字体资源供开发者使用，地址：https://cloud.tencent.com/product/ttc
腾讯云Web+：提供一站式的Web应用托管和部署服务，地址：https://cloud.tencent.com/product/tcb-webplus

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

字体是网页设计中最重要的细节

好的字体排版，可以让人耐心的看完那些文字，然后得到其中的重要信息，还可以影响到浏览者阅读的心情。...这样的好处就是，可以清晰的分辨出字母和文字，分辨笔划的起始和终止。但是，这种字体如果设置字体大小太小的话、或者你里文字较远，则会受到衬线影响，分辨不清晰。...这两个字体，就是无衬线字体，没有边角的修饰，令人看起来很整齐光滑，没有毛刺。比较适合用在网页中，让浏览者获取大量的文字信息而不会疲劳。...关于通用字体系列的更多解释、描述和字体举例，推荐大家查看在 W3school 上的资料。字体的格式格式就是指字体表现出来的粗细、宽度和姿态等等特征。...但是缺点很明显，你无法直观的看到大小，而且对于不同的大小，你需要精确的计算。字体实际表现出来的大小上面只是说了两种形容字体大小的单位，但实际上表现出来的字体大小，并非简单的单位前面的数值。

7531 0

Repo：UI设计字号完全指南，不知道用多少字号的设计师必看！

静电说：不少设计师对于UI设计中的字号大小很难把握，不知道如何设置，以达到最理想的搭配效果。今天咱们这篇文章就给大家来分享一下，这篇UI设计字体完全指南。...不使用合适的字号，会让在自己的设计稿看起来面目全非，显得粗糙，不精致。字体太小会导致无法阅读。因此，各位设计师必须足够重视。所以我想在这里发布一个编译指南，以便所有新手设计师开始使用正确的字体大小。...桌面当涉及到桌面的网站或网络应用程序排版时，我们需要了解我们的页面类型。有两种类型的网页：大量文本页面：这些类型的页面的主要目的是与用户共享文本信息。它们主要是文章、博客、新闻、术语页面等。...平板电脑通常，iPad 和 iPhone 上使用的字体大小是相同的。在平板电脑中，由于画布很大，我们可能需要一些更大的标题尺寸，但其余的方法相同。...正文字体大小：这将是默认字体大小；可用于页面上的所有正文文本，包括；文本、文本框、下拉菜单、按钮、菜单等。 4.

2.5K2 0

为什么你永远不应该在CSS中使用px来设置字体大小

在我们的 CSS 中， 1px 的东西可能会占用多个物理硬件像素，而我们没有任何纯 CSS 的方法来指定一个字面设备像素。但这没关系，因为它们通常太小了，我们不想去处理它们。...批判性地说，这意味着如果你的样式表使用 px 在任何地方设置 font-size ，那么基于该值的任何文本都将无法由用户更改。那是非常糟糕的事情。它是不可访问的，甚至可能会阻止某人完全使用该网站。...文本、线条和间距都变大了4倍；它们相对于彼此的大小保持不变：当涉及到缩放时， px 、 em 或 rem 之间没有真正的区别。但缩放并不是用户使网站更易用的唯一方法。...看一下：将屏幕截图中的文本与其上方的文本进行比较。请注意，这一次，行并没有变粗，段落之间的边距也没有成比例增加。只有文本本身变大了。...然而，当我将默认字体大小设置得更大时，我的媒体查询没有响应，因为它们仍然只查看屏幕的像素宽度。因此，我仍然有一个微小的侧边栏，里面塞满了难以辨认的巨大文本，因为我没有考虑用户的偏好。

1.7K2 0

设计进阶必读 | 如何提升界面设计的可读性？

↑这是一个书店网站，深色背景，使用了特定的字体和字体大小，形成对比，确保了可读性排版排版是什么？排版就是文本内容的外观。...任何细节，比如字间距太小，行间距太窄，字体太小或者文字颜色无法和背景形成对比——所有这些问题都会使内容变得难以阅读，让用户产生不适感，但又说不清楚问题究竟是什么。...回想一下，当我们打开一篇博客，我们最先看的一定是文章题目，其实是副标题，最后才是正文部分。那既然如此，是不是说正文的重要性没有那么突出了？当然不是！...文案这里还是有必要说一下文案本身，界面中出现的文本内容要保证至少以下4个基本功能：清晰：用户理解你在说什么，核心信息清晰易懂简洁：每段文字都是有意义的，直奔主题的，没有大量修饰，没有空话、套话有用...关于大写的用法，要注意以下几点：词首字母大写：标签、CTA，菜单以及页面标题句首字母大写：较长的文本，例如页面或字段描述以及工具提示全部字母大写：但仅适用于非常重要的内容，比如简短的标语，品牌名称

1.8K1 0

新生搜索神器Microsoft Academic Search与Google scholar、PubMed、wos、embase大PK！

谷歌学术搜索就像一个科学版的电影推荐引擎，搜索互联网，提供所有其预测会令 Eisen 感兴趣的科学文档，然后每周向他发送推荐阅读的电子邮件。 Eisen 是越来越多支持谷歌学术搜索的人群中的一员。...据说，谷歌学术搜索正在吞噬市场份额。牛津大学出版社高级编辑 David Crotty 说：“谷歌是在线期刊文章的主要推介来源，远远超过其他搜索工具。” 但研究人员并不只将谷歌学术搜索作为搜索引擎。...他认为，如果社会规范无法抑制学术骗子，那么“我们可以并将会调整操纵垃圾信息的水平”。不过，他说，谷歌无意透露其算法，部分原因是这涉及到公司的核心搜索引擎。谷歌学术搜索的优势地位可能很快会遇到挑战。...虽然谷歌学术搜索并没有带来直接的收入，但 Acharya 仍对其未来持乐观态度。他拒绝透露使用的数据，但声称全球用户数量正在增长，尤其是在中国。而谷歌学术搜索的团队正在扩大，而不是收缩。...⑥ 右上方的「anytime」可以限制发表年代 ⑦ 可以订阅搜索结果，通过RSS阅读器及时了解此方面的最新进展文献详细信息如果微软搜索仅做到这些那太小儿科了，点击一篇文献进入详细页面，可以看到更详细的信息

2.6K3 0

Web正文字体发展简史

当然，由于像素没有通用的物理尺寸，因此无法可靠地将印刷点转换为像素。屏幕具有不同的每英寸像素比。原始的 Macintosh 屏幕为 72ppi（或 68ppi ？）。...五年后，我们仍然必须为 11px 字体的死亡而战。文字太小会花费更多时间阅读。用户可能不得不向屏幕倾斜，将移动设备靠得更近，斜视或者只是更加集中精力。...我在阅读时有一定程度的注意力不足，当我尝试滚动阅读时，此设置消除了很多视觉环境；我通常会尝试通过选择我正在阅读的所有其他段落来解决注意力不足的问题，但是当设计一次只显示一个或两个段落时，这没有帮助。...假设某人坐在沙发上，笔记本电脑放在膝上，目前正在阅读文章。并假设对于这种人，在这种设置中，他们有自己的偏好和当前的疲劳程度等，因此存在一个理想的字体大小，可以阅读他们正在阅读的任何文本。...我没有检验该假设所需的技能，但我会对很大的文本趋势保持警惕。就我个人而言，我更喜欢对字体大小进行有限的调整。

1.1K1 0

简单了解下无障碍设计模式

错误示例这些文本没有遵循合颜色对比度建议，在它们的背景色中很难进行阅读。图标或其他关键元素也应使用上述推荐的对比度。正确示例这些图标遵循颜色对比度建议，和它们的背景色之间有清晰的对比。...对于有其他重要功能的控件，请确保用户可以再次启用控件、或可以通过其他途径执行相同的功能，在层次和焦点中了解更多。自动朗读文本阅读关于在活跃区域放置文本的信息。...有关推荐的外语字体大小的信息，请参阅行高。层次和焦点应用应该给用户反馈，并使用户了解他们在应用中的位置。导航控件应该便于定位，且书写清晰易懂。...例如，在 TalkBack 中打开 “通过触摸浏览” ，并改变大声说出文本的速度。...避免在文本中包含控件类型和状态屏幕阅读器会通过声音、或通过在无障碍文本前后说出控件名称，来自动声明控件的类型和状态。搜索正确示例使用简短的说明。搜索字段错误示例不要写控件类型。

4.8K4 0

新手Web设计师应该避免的 6 宗罪

新手Web设计师和开发人员往往以有缺陷的创作而告终，却不知道真正的故障出自于哪里。虽说有这么多的设计书籍，但即使都读了，也不会对最后的设计有任何意义。...至于颜色设计指南，可以看看来自于谷歌的这个详细工作。它不仅从理论上帮助你，而且还提供了工具帮助你更轻松地完成工作。 2.忽略图标用户自己会阅读文本的，你是这么认为的吧？...很多设计师在铺设内容时会忽略一致性，忘记设计一致性的重要性。为临近的相关信息片段保持一种类似的格式很重要，并且一致的颜色/模式/等可以帮助用户创建那些在没有连贯设计时迷失的连接。...对于初学者来说，你可以试试这个超快的颜色生成器：Coolor。 6.不在意对齐如果你想要观众阅读网页上的大部分信息，那么你需要让这些信息看起来有用且易消化。对齐在这个问题上起很大的作用。...可以阅读Tuts+关于对齐和网格的这篇文章以了解更多信息。总结如果你是一个新手设计师，并且犯过这些错误，那么好好查看下你的设计，看看有没有可以修复的地方。

7817 0

新手Web设计师应该避免的 6 宗罪

新手Web设计师和开发人员往往以有缺陷的创作而告终，却不知道真正的故障出自于哪里。虽说有这么多的设计书籍，但即使都读了，也不会对最后的设计有任何意义。...至于颜色设计指南，可以看看来自于谷歌的这个详细工作。它不仅从理论上帮助你，而且还提供了工具帮助你更轻松地完成工作。 2.忽略图标用户自己会阅读文本的，你是这么认为的吧？...很多设计师在铺设内容时会忽略一致性，忘记设计一致性的重要性。为临近的相关信息片段保持一种类似的格式很重要，并且一致的颜色/模式/等可以帮助用户创建那些在没有连贯设计时迷失的连接。...对于初学者来说，你可以试试这个超快的颜色生成器：Coolor。 6.不在意对齐如果你想要观众阅读网页上的大部分信息，那么你需要让这些信息看起来有用且易消化。对齐在这个问题上起很大的作用。...可以阅读Tuts+关于对齐和网格的这篇文章以了解更多信息。总结如果你是一个新手设计师，并且犯过这些错误，那么好好查看下你的设计，看看有没有可以修复的地方。

6802 0

11种最佳编程字体中的哪款适合你？

整体而言，文本看起来比其他字体更清晰，更不用说易于区分的字符了。 ? 5. Menlo Menlo是macOS中面向Xcode和Terminal的新默认字体。...它是DejaVu Sans Mono的衍生字体。自很久以前使用OSX以来，我个人比较喜欢Menaco，但Menlo也是程序员的一个好选择。 ? 补充信息：Menlo不再是macOS中的默认字体。...Space Mon Space Mono由Colophon Foundry设计，是一款优秀的等宽字体。我不喜欢的两个缺点是：在14pt字体大小下，（1）l可能与1混淆，（2）两者无法区分。 ? 8....Droid Sans Mono Droid Sans是为Android开发的，是一种漂亮的字体。然而最大的问题是，它没有斜杠零，所以0和O无法区分。...补充信息：Droid Sans Mono在这里有斜杠版和加点版。感谢hawtre smith。谢谢阅读！但愿本文能帮助你为自己的IDE或终端找到新的字体，就像购买一件新的T恤！

4K2 0

谷歌搜索秘籍泄漏：揭秘内部工程文档

探索你一直渴望了解的谷歌算法的秘密。谷歌，如果你正在阅读这篇文章，那一切都已无法挽回。好吧，让我们开始吧。谷歌搜索内容库 API 的内部文档不慎泄露。...虽然我所审查的文档中没有谷歌评分算法的具体细节，但它提供了关于存储内容、链接和用户互动数据的丰富信息，以及关于这些数据如何被操作和保存的详尽描述，从而揭示了一系列的特征。...参与度：1 赞；Gary Illyes (@methode) 回复说：“我们真的没有‘整体域名权威’。不过，带锚文本的文本链接更佳。”...字体大小影响重要性 2006 年我开始从事 SEO 时，我们会加粗或下划线文本，或增大某些文本的字体大小，以突出其重要性。...没有我们，谷歌也无法完成他们的工作。

951 0

Deepin 安装及使用Rime输入法--中州韵输入法

中州韵聪明的输入法 – 中州韵三个平台有三个不同的名字，但使用跟配置都相同。 Windows – 小狼毫 Mac – 鼠鬚管 Linux – 中州韵鬼知道为什么起这么多名字「手动滑稽」?...只是没有找到更改主题跟字体大小的方法，每次更改字体大小，重启或注销后又会恢复原样。...打字入门定制指南方案设计小问题的解决字体太小通过更改 rime 的配置文件发现每次重启或注销都会变回来。...这里也是可以更改字体大小的，不过我的环境重启会失效。...无法更改皮肤只能使用 fcitx 默认的皮肤，这个目前没有办法，网上有制作的皮肤放到 fcitx/skin/ 里的，但有反馈说并不能加载出来。

4.5K2 0

浅谈外贸网站的用户体验

关于优化Wordpress网站速度的几点建议选择优质的国外主机或者服务器使用CDN加速压缩图片（在上传Wordpress网站之前，我们可以使用Photoshop对其质量进行压缩）安装缓存插件（推荐WP-Optimize...排版：客户来到网站，浏览信息都是从上往下的，所以我们要把重要的信息，客户关心的问题尽量放到上面。每个行业的产品，客户群体是不同的。这个一定要从客户的需求出发。...浏览体验文本: 文本就是我们的字体，客户在浏览我们网站的时候，往往需要阅读网站的文字，所以我们也要注重文字的美观，利于阅读体验，比如字体的颜色和字体间距，如果内容多的话就要分段，内容表达清晰有逻辑，如果重要的部分我们可以做加粗处理...链接这里的链接就是网站的内链，内链就是同一域名下页面之间的相互链接，内链的作用不仅可以让谷歌更加高效率的抓取我们的网站，并且对用户体验帮助也肯大。...链接可以让客户快速找到客户想要找的信息，比如客户在浏览首页关于我们简介的时候有了兴趣，想了解更多信息，这时候我们在简介下面加上按钮链接，这样就提高了用户的体验。

1471 0

《精通CSS》第4章网页排版

分别包括以下几部分内容：基础排版：包括文本颜色、字体相关、间距、对齐、折行连字符等文本特效多栏布局更丰富的字体：Web 字体高级的排版特性：OpenType 其中比较推荐大家关注的点有对于行盒子构造的理解...如上em的计算规则会因为应用属性的不同而不同。我们还可以rem，它也是一个缩放因子，它是相对于根元素的字体大小进行缩放的。 rem较新，但所有现代浏览器均已支持，只有 ie8 及更早的浏览器不支持。...body { line-height: 1.5; } 没有单位的行高，表示是当前字体大小的 1.5 倍。当然我们也可以给line-height设置像素、百分比或em值。...过长或过短的文本行会打断人的眼球移动，导致读者无法连续阅读，甚至读不下去。书中建议主体内容的文本行长通常是 45-75 个字符，平均 66 个字符。对于小屏幕也要有至少 40 个字符。...这主要是因为标题高度导致的问题。这一问题会一定程度地影响阅读。我们可以通过修改标题的高度，让其等于段落文本的整数倍，从而使得各栏文本的基线均对齐，这种方法叫做垂直律动。如下，对标题做如下调整。

1.4K2 0

网站页面优化：BODY标签

简单地说，BODY标签是网页主要文本内容，这是搜索引擎优化中最重要的部分，即使页面基础优化其它因素做得非常出色，如果创建的正文内容质量不高不是唯一的，内容中不包括搜索关键词，将永远不会获得排名。...网站页面优化HEADING标签详细介绍HEADING优化方法，关于BODY文本页面优化，我们通常把优化关键词放到BODY文本。想象搜索引擎要做什么？...谷歌希望提供搜索结果链接到的网页，能够很好地匹配搜索查询输入搜索框中的关键词。谷歌希望精准匹配搜索者搜索关键字与内容，原来搜索引擎是根据SEO三要素推荐给搜索者内容。...个词÷200个词x100%=5%，很多人肯定很想知道关键词密度标准值，谷歌搜索很多关键词密度的信息，答案千奇百怪，例如，雅虎3%，必应10%，谷歌2%等等，这些都是胡说八道，没有科学依据。...如果读起来不通顺，就要扩展长尾关键词，对搜索引擎来说多一个了解正文内容的渠道，不要太执着关键词密度，确保目标优化关键词分散到段落各处，阅读起来通顺。

1.1K2 0

微信iOS多设备多字体适配方案总结

随着这些大屏设备的登场，部分用户觉得微信的字体太小，但也有很多用户不喜欢太大的字体。...二、多设备适配 1、各设备的逻辑分辨率：关于iphone6/6plus的物理分辨率、逻辑分辨率、屏幕物理尺寸、PPI等资料，很多文章已经有详细说明了，这里就不再累赘。...这样取值时会优先取到单独的配置，如果没有单独配置就取到默认配置。...这是因为字体放大了，但图片、宽高等其它元素没有放大。 ?...幸好微信里的webview阅读90%都是公众号文章，这些页面样式相对统一，而且是微信团队可控的。

4K8 1

10个最恐怖的UI UX设计错误

阅读困难：低对比度的文字、小字号和拥挤的内容几乎让用户无法阅读和理解信息。这可能导致用户体验不佳，并使用户难以与您的内容互动。为了避免这个错误，请使用清晰易读的字体、适当的对比度和组织良好的内容。...然而，原始版本的应用存在一些可用性问题，使用户难以有效地浏览和使用。其中最重要的问题之一是可读性差。应用程序的文本对比度低，字体大小小，内容拥挤，这使得用户难以阅读和理解信息。...让我们考虑一个没有替代文本描述的网站或应用中的图像，视觉障碍用户可能无法理解图像的上下文。...这也是Oracle网站的情况，他们使用了行业特定的术语，但没有清晰的解释，这使得非技术用户难以理解他们的产品和服务。...Target的仅限桌面设计：过去，Target的网站没有针对移动设备进行优化，导致移动用户的用户体验较差。该网站难以导航，按钮和链接太小，不易点击，图片常常过大或调整不当。

3463 0

在输掉 ChatGPT 首战前，谷歌的 AIGC 战略是什么？

“这不再是创造一幅真实画面的生成式模型，这是关于制作你自己创造的东西，”Eck 说，“技术应该服务于我们的需要，即对我们所做的事情拥有代理权和创造性的控制。”...当然，谷歌的 LLM 和文本到图像模型的质量并不比 OpenAI 的 GPT-3 和 DALL-E 2 差。但问题是，谷歌能否基于这些模型推出一款成功的产品？...微软在编码方面也有领先优势，其 GitHub Copilot 和 Codex 已经处于生产模式，而谷歌的内部代码生成工具还没有进入生产模式。...但这些 IDE 的市场份额无法与微软的 Visual Studio Code 和 GitHub Codespaces（也归微软所有）相提并论。...正如谷歌重塑了信息发现，亚马逊随着网络的普及重塑了购物模式一样，那些发现并拥抱人工智能新机遇的公司，必将改造现有市场或创造新的市场。

2763 0

设计细节提升开发效率与质量

开发：这里已经完全对齐了，视觉：看起来还没完全对齐，我的图也没有切错吧？开发：字体大小和间距都是按照视觉稿来的，视觉：这里间距偏差这么大，为什么不按照视觉稿？...视觉处理_文字行宽关于行宽，以设计 banner 的标题及描述文字为例，定义行宽是为了让文本在极限宽度的时候进行换行，再固定好配图的尺寸，从而得到文本与配图之间的间距，定义行宽、行数、字数，能够更好的为运营人员规范输出的文案...我们把 4 点栅格的设计逻辑套用到卡片设计上，第一眼我们可能比较难去评判两者的好坏，但仔细看，我们就会发现第一个卡片的按钮没有水平对齐，相互之间的间距尺寸也是没什么逻辑性，假如今天调整一个 8px 的间距...使用 4 点栅格系统，通过理性、秩序、逻辑的设计方式赋予画面秩序感以及阅读体验，而以 4 为倍数，每个数字之间都相差为 4，不会太大，也不会太小，同时保持着秩序，让设计更加理性。...关于标注，利用 sketch 的 Messure 插件导出规范给到开发，清晰标注所有信息模块的尺寸、间距、字体大小、行高、颜色，生成基础的代码模块，无论对于设计还是开发，都可以大大减少了双方的时间。

9755 1

如何设置字体大小？我们可以使用哪些单位来修改字体大小呢？

字号单位(Chinese)ptPoint点Pc Pica约六分之一英寸PxPixel像素EmEm字体高ExExe 字体高%Percentage百分比请注意，我们应该避免使用point和pica来定义屏幕的上显示的文本样式...相对单位如em和rem可以根据父元素或根元素的字体大小进行相对缩放，从而在不同大小的屏幕上提供更好的阅读体验。3....无法利用浏览器的自动调整功能：浏览器提供了一些自动调整字体大小的功能，以改善用户的阅读体验，例如用户可能会根据自己的视力情况调整浏览器的默认字体大小。如果使用绝对单位，这些功能将无法发挥作用。6....不符合Web标准：Web标准推荐使用像素（px）、百分比（%）、em rem等单位来设置字体大小，因为这些单位更符合Web内容的特性，能够提供更好的跨平台一致性。7....影响SEO优化：搜索引擎优化（SEO）是网站设计的重要考虑因素之一。使用不推荐的单位可能会影响搜索引擎对页面内容的解析，进而影响网站的搜索排名。8.

1261 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭