用GitHub做了一个网站，字体不能在所有的浏览器，操作系统和设备上显示？ - 腾讯云开发者社区

文章/答案/技术大牛

发布

浏览器指纹检测：从关键指纹参数到浏览器环境一致性判断

当你打开一个网页时，网站还可以读取一部分浏览器和设备信息，例如使用什么操作系统、浏览器版本、屏幕大小、语言和时区，以及显卡渲染等特征。这些信息组合起来，就形成了通常所说的浏览器指纹。...可以先记住一个判断原则：浏览器指纹检测不只是看某个参数有没有暴露，更重要的是看这些信息放在一起后，能不能描述同一台合理的设备和同一个网络环境。...后面的用户代理、Canvas、WebGL 和硬件信息，本质上也是用同样的思路检查。用户代理要和其他系统信息一起看用户代理（User-Agent）是浏览器最常见的身份信息之一。...看到一个 GPU 渲染器名称时，不需要判断这块显卡“好不好”。更重要的问题是：它和浏览器声称使用的操作系统、设备类型以及其他硬件特征能不能对得上。...可以重点观察几组关系：操作系统和字体；设备类型和屏幕尺寸；屏幕分辨率和设备像素比；逻辑处理器数量和设备类型；GPU 和操作系统。

2031 0

29个前端工程师和设计师必备的Chrome插件

用BrowserStack提供的安全、便捷的云服务，在700多个真实的桌面系统和移动浏览器中，测试应用的布局、工作流和交互性。 JSONView —用来验证和查看JSON文件。...Window Resizer —调整浏览器窗口大小，模拟各种分辨率。帮助Web设计师和开发者测试多种分辨率下的布局效果。 WhatFont — 识别网页所使用的字体。...User-Agent Switcher — 修改用户代理（User-Agent）字符串，以伪装成某些浏览器和操作系统，还可以伪造特定的URL。...CSS Shapes Editor — 在所选中元素上方显示交互式编辑器，用于新建和调整用CSS写的图形。...Responsive Web Design Tester —测试移动网站在移动设备上的效果。该插件能够模拟不同尺寸、装有不同浏览器的移动设备。

2.5K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

聊一聊跨浏览器测试验证点梳理

跨浏览器测试的核心目标是确保网站在不同的浏览器（及其不同版本）和操作系统上提供一致且可接受的用户体验。梳理验证点时，需要覆盖功能、布局、性能、兼容性等多个维度。...二、布局与渲染响应式设计网站在不同屏幕尺寸（桌面、平板、手机）和分辨率下布局是否正确？媒体查询是否生效？断点切换是否流畅？视口设置是否合理？移动设备上是否禁止了缩放或设置了正确的缩放比例？...自定义字体是否在所有浏览器中加载和显示正确？CSS Reset 或 Normalize.css 是否有效应用，消除了浏览器默认样式差异？文本与排版字体大小、行高、字间距是否一致？...浏览器扩展/插件常见的广告拦截器或其他扩展是否会意外阻断网站功能或样式？七、跨浏览器测试策略关键点明确目标环境根据用户统计数据确定优先级最高的浏览器、操作系统、设备（桌面/移动）组合及其版本。...跨浏览器测试是一个系统性的工作，需要根据项目实际情况，在覆盖广度（浏览器/设备种类）和测试深度（功能点）之间取得平衡。

9642 0

教你避雷！网页设计中常见的17个UI设计错误集锦（附赠设计技巧）

理想的做法是，你必须像你的竞争对手一样思考，开发一个遵循与响应式设计相关的最佳UI实践的网站，在所有设备上都能正常工作，不需要水平滚动，并且已经通过所有跨设备浏览器的测试策略。 5....非跨浏览器兼容的网站 ? 当今互联网上有很多浏览器可供使用，根据使用设备和人口数量的不同，在你发布你的网站之前，我们可以给你提供最好的UI设计技巧。...执行适当的跨浏览器测试，并确保网站在所有目标浏览器上正常运行。以下是每个浏览器中不同外观的示例。上图是LambdaTest平台上独一无二的div的演示。...LambdaTest是一个跨浏览器的测试工具，可以让你在2000多个浏览器中测试你网站的RWD(响应式网页设计)，以及它们在实际操作系统上运行的不同版本。 6. 不正确的字体大小 ?...而具有大量数据的冗长形式只会使用户复杂化，并且在填写时可能会遗漏一些重要信息，尤其是在移动设备上。最好的UI设计实践之一是保持一个更容易填充的简单表单，并尽可能少地提供信息。

1.3K1 0

前端基础知识概述 -- 移动端开发的屏幕、图像、字体与布局的兼容适配

：如在电脑上显示的的大段描述文本，在手机上就只能少量显示或全部隐藏能自动折叠的导航和菜单：展开还是收起，应该根据页面尺寸来判断放弃使用像素作为尺寸单位：用dp(对于前端来说，这里可能是rem...物理像素，又称为设备像素。显示屏是由一个个物理像素点组成的，1334 x 750 表示手机分别在垂直和水平上所具有的像素点数。...完整的一个字体资源实在太大了，所以我们应该尽可能的使用用户设备上已有的字体，而不是额外去下载字体资源，从而使加载时间明显加快。...默认使用特定操作系统的系统字体可以提高性能，因为浏览器或者 webview 不必去下载任何字体文件，而是使用已有的字体文件。 ...字体通常是网站上加载的最大/最重的资源之一。如果我们可以使用用户机器上已有的字体，我们就完全不需要再去获取字体资源，从而使加载时间明显加快。

4.2K3 2

【拓展】937- 科普：探讨浏览器指纹

而浏览器指纹是指仅通过浏览器的各种信息，如CPU核心数、显卡信息、系统字体、屏幕分辨率、浏览器插件等组合成的一个字符串，就能近乎绝对定位一个用户，就算使用浏览器的隐私窗口模式，也无法避免。...也就是说，理论上你访问了某一个网站，那么这个网站就能识别到你，虽然不知道你是谁，但你有一个唯一的指纹，将来无论是广告投放、精准推送、安全防范，还是其他一些关于隐私的事情，都非常方便。...1、基本指纹浏览器基本指纹是任何浏览器都具有的特征标识，比如屏幕分辨率、硬件类型、操作系统、用户代理（User agent）、系统字体、语言、浏览器插件、浏览器扩展、浏览器设置、时区差等众多信息，...Canvas指纹的原理大致如下：相同的HTMLCanvasElement元素绘制操作，在不同操作系统、不同浏览器上，产生的图片内容不完全相同。...在图片格式上，不同浏览器使用了不同的图形处理引擎、不同的图片导出选项、不同的默认压缩级别等。在像素级别来看，操作系统各自使用了不同的设置和算法来进行抗锯齿和子像素渲染操作。

1.3K3 0

浏览器指纹追踪技术了解一下?

2.6K2 0

Web网页响应式布局.md

A：不管您的用户使用何种终端访问您的网站，都能够自动识别适应终端设备的分辨率以及宽度，让您的网站在众多设备中无缝浏览；响应式布局是就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本响应式布局的优缺点...固定字母间距的网格的媒体，比如电传打字机和终端 tv 电视机类型的设备可以使用多条语句来将同一个样式应用于不同的设备类型和设备特性中，指定方式类似如下所示： @media...在移动设备上设置原始大小显示和是否缩放的声，是在页面的头部\之间加上下面这样的语句∶ /** 设置默认的宽度为设备的宽度 **/ <meta name="viewport"...（1)px 描述：piexl（像素)用作web的设计单位，它本身固有的精密度和准确度，字体赋具体的值，就能在所有设备以及浏览器中保持相同的大小。...（2)em 描述：em也是字体单位标准，可以定义font-size的值大小，em在浏览器中是可以变化的，不需要去为每一个元素设置文本大小值；比如：font-size值为px，那么1em = 16px，

2.3K2 0

Web网页响应式布局

2.8K3 0

【CSS】955- 你该知道的字体 font-family

各大网站最新 font-family 作为前端的一个习惯，浏览各个网站的时候总是喜欢打开开发者工具时不时审查元素一下。...默认使用特定操作系统的系统字体可以提高性能，因为浏览器或者 webview 不必去下载任何字体文件，而是使用已有的字体文件。...正如每个前端开发人员都知道的那样，将一个功能纳入规范是一回事，将其纳入浏览器又是另一回事。幸运的是，system-ui 的普及很快。Chrome 和 Safari 都可以在各种平台上完全支持它。...Roboto Roboto 是为 Android 操作系统设计的一个无衬线字体家族。Google 描述该字体为“现代的、但平易近人”和“有感情”的。...字体通常是网站上加载的最大/最重的资源之一。如果我们可以使用用户机器上已有的字体，我们就完全不需要再去获取字体资源，从而使加载时间明显加快。

6.6K2 0

如何提高CSS性能

结合现代网站的复杂性和浏览器处理CSS的方式，即使是适量的CSS也会成为设备受限、网络延迟、带宽或数据限制的瓶颈。...因为性能是用户体验的一个至关重要的部分，所以必须确保在各种形状和尺寸的设备上提供一致的高质量体验，这也需要优化你的CSS。...我们必须在所有可能的状态下，在所有可能的设备上仔细审核整个网站（以覆盖媒体查询），并执行所有可能改变样式的JavaScript功能。...实现这一目标的一种方法是使用font-display--一个用于指定字体显示策略的API。使用带有值交换的 font-display告诉浏览器应该立即使用系统字体显示使用此字体的文本。。...与其加载常规和粗体风格加上它们的斜体版本，你可以加载一个包含所有信息的单一文件。 Monotype做了一个实验，将12种输入字体组合起来，生成8种权重，横跨3种宽度，横跨斜体和罗马风格。

3.5K3 0

什么是响应式网站？响应式网站建设解决方案

响应式网站通过html5+CSS3调整不同环境下网站的版块、图片、文字可随着设备屏幕的不同自动改变尺寸，实现一个网站能够兼容多个终端，各种设备页面只有唯一网址，整个网站一套代码，不仅使用不同设备访问的用户都能获得最佳的浏览体验...二、响应式网站建设解决方案响应式网站建设是为不同类别的物理设备建立相同的网页（pc、平板、手机、手表等），检测到设备分辨率大小后调用相应的网页，所有的设备都是同一个页面同一个网址，所以响应式网站主要是围绕这些点进行...，规划在不同分辨率规则下的显示形式。...(2)、要保证内容的字体字号在所有设备中都可读，尤其是在手机上，字体不可过小。 (3)、高分辨屏幕用两倍大小的图片，以让图片在高分辨率值的屏幕上看起来很锐利。...8、设备与浏览器兼容测试响应式网站建设会存在很多兼容性的问题，因此我们在做响应式站点的时候需要多设备多分辨率屏幕测试并多种浏览器进行测试，最重要的是ie、火狐、谷歌这三个浏览器测试，因为其他浏览器基本上用的都是它们的内核

3.5K4 0

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

通过使用相对单位，设计师可以确保网站在不同设备和浏览器中以合适的字体大小显示[1]。下面是正文：在 Web 开发领域中，有很多误解流传，即使它们被反驳了很多次也仍然存在。"...屏幕使用称为像素的彩色光点阵来显示图像。一个像素是显示器上的一个彩色光点；硬件能够呈现的最小可能的“点”。这就是我在本节中所说的“字面上的”、“实际的”或“设备”像素；物理世界中的一个像素。...一个例子：iPhone 14 Pro 上的像素非常微小，16px 在字面上的设备像素大小大约相当于2pt字号的印刷字体大小。好在浏览器为我们缩放了它们！...也许我们不希望填充随着字体大小的增加而膨胀。在所有这些情况下， px 仍然是一个不错的选择。我个人建议使用 rem 来设置所有的大小。...如果用户设置了非常大的字体大小，则可能不是这种情况，将媒体查询设置为 rem 而不是 px 可以帮助我们避免这种假设并响应用户的偏好。我在这个网站上遇到了这个问题；我把所有的断点都设置在 px 上。

4K2 0

静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别

2、设计方法：　　PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；　　移动设备：另外建立移动网站，单独设计一个布局...前端开发的早期历史上，用来应对不同尺寸的PC屏幕（那时屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式，但缺点明显：主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示...响应式设计的目标是确保一个页面在所有终端上（各种尺寸的PC、手机、手表、冰箱的Web浏览器等等）都能显示出令人满意的效果，对CSS编写者而言，在实现上不拘泥于具体手法，但通常是糅合了流式布局+弹性布局，...，根据不同的设备采用不同的css，而且css都是采用的百分比的，而不是固定的宽度，不同点是响应式的模板在不同的设备上看上去是不一样的，会随着设备的改变而改变展示样式，而自适应不会，所有的设备看起来都是一套的模板...5、用em/rem定义尺寸的另一个好处是更能适应缩进/以字体单位padding或margin／浏览器设置字体尺寸等情况（因为em/rem相对于字体大小，会同步改变）。

13.7K3 3

你的时区正在告诉 Claude Code，你是中国人

你的时区，你的语言设置，你的字体，这些你以为跟AI毫无关系的东西，全部都是线索。然后我就在GitHub上看到了一个项目。有人做了一个工具，叫claude-tester。...它通过你的User-Agent来推断你设备上的Emoji风格。不同平台不同厂商的Emoji渲染都不一样，而中国用户常用的设备和系统，Emoji风格有明显的特征。6个信号，加权叠加，满分100。...我们每天都在用浏览器，每天都在产生这些数字指纹，但我们自己完全不知道。你装了一个中文字体，你在系统设置里选了北京时区，你用的是某个国内品牌的手机，这些看似无关紧要的选择，在AI眼里，全部都是线索。...但实际上你的电脑里每时每刻都在往外发送几百个信号，告诉别人你是谁，你在哪，你用什么设备。这个工具的价值在哪呢。我觉得不在于帮你「伪装」，说实话想伪装也很难，6个信号全改一遍跟你重装个系统差不多了。...它已经深入到你的操作系统设置里，深入到你的字体文件里，深入到你的Emoji编码里。纽约时报之前发过一个很有意思的报道，他们发现网站可以通过你的系统字体来判断你的身份。

3331 0

当匿名不再匿名：隐私时代下的计算机指纹

它像一个尽职尽责的清洁工，在你离开之后，把房间恢复到初始状态。但请注意一个关键点：它清理的是房间，而不是你和外界的通话记录。只要你访问了一个网站，你的浏览器就必须向服务器发送请求。...当你意识到这一点之后，一个问题就会自然浮现出来：如果网站不能通过 Cookie 长期识别你，那它还能通过什么方式，判断“你是不是你”？答案，就是指纹。这里的指纹，并不是某一个神秘的唯一编号。...这里面包含了操作系统类型、浏览器内核、版本号、设备架构。单独看，它们并不唯一，但它们提供了一个大致的轮廓。接下来，是显示和渲染相关的特征。屏幕分辨率、设备像素比、缩放比例、色深、显示器数量。...这些参数往往被我们认为只是“显示效果”，但在统计意义上，它们已经具备了相当强的区分能力。再往下，是字体。字体是一个被严重低估的指纹来源。...浏览器会升级，系统会更新，分辨率会改变，外接显示器会插拔，字体会被安装和删除。如果指纹是一个严格的哈希值，那么它几乎无法长期使用。因此，现代指纹系统从一开始就放弃了“完全一致”的幻想。

4381 0

2021 年值得推荐的 14 款 Chrome 开发者插件

一些最常用的包括快速清除会话 Cookie、显示元素信息、显示图像文件大小、显示地形信息和编辑 CSS。使用这些方便的工具，你可以快速检查元素并开始调试你的网站。...这个插件最大的一大优点是你可以在所有流行的浏览器（Firefox、Opera 等）和你使用的任何操作系统上运行它。这意味着你可以使用它在任何地方进行调试和检查。...，字体名称、字体大小、字体颜色等，非常方便，目前有 Chrome 和 Safari 扩展，Firefox 的用户可以使用书签栏工具。...，在某个时间点，你会想知道网页上显示的颜色代码。...它提供了一个浮动面板，该面板显示鼠标悬浮在的元素的标识，以及它的字体、文本、颜色、背景、框、定位和效果属性。CSSViewer 可以提供你所需要的基本的CSS信息。

3.9K3 0

Web 字体 font-family 再探秘

各大网站最新 font-family 作为前端的一个习惯，浏览各个网站的时候总是喜欢打开开发者工具时不时审查元素一下。...默认使用特定操作系统的系统字体可以提高性能，因为浏览器或者 webview 不必去下载任何字体文件，而是使用已有的字体文件。 ...Roboto Roboto 是为 Android 操作系统设计的一个无衬线字体家族。Google 描述该字体为“现代的、但平易近人”和“有感情”的。...Roboto，面向 Android 和一些新版的的 Chrome OS Helvetica,Arial，在针对不同操作系统不同平台设定采用默认系统字体后，针对一些低版本浏览器的降级方案 sans-serif...字体通常是网站上加载的最大/最重的资源之一。如果我们可以使用用户机器上已有的字体，我们就完全不需要再去获取字体资源，从而使加载时间明显加快。

3.3K1 0

InCopy（Ic）2023软件下载及安装教程永久使用 InCopy（Ic）

id=复制粘贴浏览器访问或者鼠标右键转到即可下载软件介绍 Adobe InCopy 是Adobe公司出品的一个专业的文字处理应用程序。InCopy的编辑器用于写作、编辑和设计(风格、字体等)出版物。...16 GB）硬盘空间：3.6 GB 可用硬盘安装空间；安装期间需要额外的可用空间（不能安装在可移动闪存设备上）；推荐固态硬盘显示器分辨率：1024 x 768 显示器（推荐 1920 X 1080）...，HiDPI 显示器支持显卡：32 位显卡 Windows 10 版本 1507、1511、1703 和 1709 不支持安装字体有关安装和激活要在所有应用程序中使用的字体的信息，请参阅系统文档或字体管理器文档...通过将字体文件复制到硬盘驱动器上 InCopy 应用程序文件夹内的 Fonts 文件夹，即可使用 InCopy 中的字体。但是，该 Fonts 文件夹中的字体仅对 InCopy 可用。...OpenType 字体显示为“Helvetica (OTF)”。

1.3K4 0

防关联到底靠“改浏览器”还是“虚拟电脑”？一次说清技术本质

浏览器指纹由操作系统类型、屏幕分辨率、色彩深度、时区、语言、字体列表、Canvas 2D渲染哈希、WebGL GPU特征、音频上下文、媒体设备列表、电池状态、触摸支持等数十项参数共同构成。...克隆镜像的指纹雷同性：如果多个VM是从同一个基础镜像克隆而来，它们的硬件参数、系统补丁、预装软件、字体列表可能高度一致，反而形成“同一批次设备”的群体指纹。...在实际部署中，VM的“指纹自然度”还取决于镜像的“年龄”和“个性化程度”。一个刚刚安装的Windows镜像，字体列表、系统补丁、预装软件非常干净，反而会被平台标记为“新设备”或“沙箱环境”。...• 字体与语言环境：模拟不同操作系统（Windows、macOS、Linux）、不同地区（美国、英国、德国、日本）的字体列表和系统语言。...一个常见的混合部署思路是：用虚拟机隔离不同业务线或不同团队的基础设施边界，然后在每个VM内部运行指纹浏览器管理具体账号。

3661 0

点击加载更多

浏览器指纹检测：从关键指纹参数到浏览器环境一致性判断

29个前端工程师和设计师必备的Chrome插件

聊一聊跨浏览器测试验证点梳理

教你避雷！网页设计中常见的17个UI设计错误集锦（附赠设计技巧）

前端基础知识概述 -- 移动端开发的屏幕、图像、字体与布局的兼容适配

【拓展】937- 科普：探讨浏览器指纹

浏览器指纹追踪技术了解一下?

Web网页响应式布局.md

Web网页响应式布局

【CSS】955- 你该知道的字体 font-family

如何提高CSS性能

什么是响应式网站？响应式网站建设解决方案

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

静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别

你的时区正在告诉 Claude Code，你是中国人

当匿名不再匿名：隐私时代下的计算机指纹

2021 年值得推荐的 14 款 Chrome 开发者插件

Web 字体 font-family 再探秘

InCopy（Ic）2023软件下载及安装教程永久使用 InCopy（Ic）

防关联到底靠“改浏览器”还是“虚拟电脑”？一次说清技术本质

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐