如何使用Chrome开发控制台更改网页的字体？ - 腾讯云开发者社区

文章/答案/技术大牛

发布

如何使用Chrome的开发者工具检查网页故障

本文以检查XSwitch网页故障为例，其实对其他网络问题也通用。...假设你登录以下网址时遇到故障无法登录： https://demo.xswitch.cn/admin.html 用Chrome浏览器（微软Edge浏览器也类似）打开上述网址，按F12键，或右键点击网页，然后选择...【审查元素】菜单，将会出现类似下面的图，下面就是Chrome开发者工具区域。...本文主要是以排查XSwitch登录问题为例讲解Chrome Devtools的使用方法，步骤和思路适用于任何跟浏览器相关的问题。...如果你确实遇到了XSwitch相关的问题，可以继续参考在安装或使用XSwitch时遇到问题我该怎么办：https://xswitch.cn/pages/howto/trouble-shoot/ 。

2.3K2 0

如何妥善的设置网页的字体

在写模板时很纠结字体怎么写，于是找了几个网站抄了下字体配置。但是这个问题还是困扰我心！...就在昨天突然看到github上的一个项目，这个项目就是简单粗暴的办法就是把各个平台的安全字体提取出来，用优先级搞一下。...楷体，宋体使用方法，以楷体为例故天将降大任于是人也必先苦其心智劳其筋骨饿其体肤空乏其身行弗乱其所为所以动心忍性曾益其所不能也可以简单粗暴的把它里面的字体配置复制出来...，但是程序员也许就是有着这样的奇怪强迫症的一群人吧？

1.3K1 0

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

是的

没有找到

Chrome扩展插件的开发--获取网页Cookies

Chrome扩展插件的开发--获取网页CookiesChrome浏览器在浏览器类应用软件中一直居于榜首，很多人选择Chrome浏览器不仅仅是因为它的稳定，还有它丰富的可拓展性。...那么有没有想自己开发一款自己的谷歌浏览器插件呢？...本文将介绍大家手动开发一个谷歌浏览器插件获取cookies. 1.Chrome插件开发文档https://developer.chrome.com/docs/extensions/mv3/2.官网入门demoHello...js 代码直接写在 html 文件里，否则会报错，必须要单独新建一个 js 文件，然后通过 script 标签引用该文件；通过在popup.js内调用chrome获取cookies的API来获取所访问网页的...浏览器内导入使用打开chrome的插件管理页面chrome://extensions打开该页面右上角的开发者模式点击加载已解压的扩展程序，上传本地文件即可导入插件点击浏览器右上角扩展程序图标可以将自己的插件固定到浏览器顶部

2K2 0

Chrome扩展插件的开发--获取网页Cookies

Chrome扩展插件的开发--获取网页Cookies Chrome浏览器在浏览器类应用软件中一直居于榜首，很多人选择Chrome浏览器不仅仅是因为它的稳定，还有它丰富的可拓展性。...那么有没有想自己开发一款自己的谷歌浏览器插件呢？...本文将介绍大家手动开发一个谷歌浏览器插件获取cookies. 1.Chrome插件开发文档 https://developer.chrome.com/docs/extensions/mv3/ 2.官网入门...，不能将 js 代码直接写在 html 文件里，否则会报错，必须要单独新建一个 js 文件，然后通过 script 标签引用该文件；通过在popup.js内调用chrome获取cookies的API来获取所访问网页的...浏览器内导入使用 · 打开chrome的插件管理页面chrome://extensions · 打开该页面右上角的开发者模式 · 点击加载已解压的扩展程序，上传本地文件即可导入插件 · 点击浏览器右上角扩展程序图标可以将自己的插件固定到浏览器顶部

3.1K2 0

网络字体@font-face 如何处理网页中的特殊字体

HTML5学堂：随着网页的发展，网页中出现了越来越多的字体种类，网页自带的微软雅黑、宋体、黑体已经越来越难以满足设计的需要，那么，如何在网站中使用比较特殊的字体，又不会下载太大的字体文件，来装饰我们网站的部分呢...如何在网站中使用比较特殊的字体随着网页的发展，网页中出现了越来越多的字体种类，原有的微软雅黑以及宋体早就无法满足设计的需要，那么，如何在网站中使用比较特殊的字体（如“华文行楷”）来装饰我们网站的部分呢...作为前端开发的人员都知道，在自己电脑上安装字体查看网页没有什么作用，因为网页会上传到服务器，访问网站的用户电脑上不一定会有这种字体，除非在客户端安装这个字体，才能保证每个用户网页中能够正常显示。...第一步设置的是font-family的名字，在这里设置好之后。网页中哪个部分需要使用这种字体，就输入font-family（对应的名字）即可。...接下来就为大家介绍解决的方法：我们完全可以把网页中出现的特殊字体提取出来，把没有必要的去除掉，制作一个精简版的字库供网页使用。此时会使用到font creator 软件。

7.9K5 0

如何快速识别出网页上的字体 | 利器

又赶上这个活动图、单页乱飞的季节，对于一个好的页面除了内容、图片重要外，字体也是不容忽视的。这个看看Apple家常用的冬青黑、PingHei就全明白了。还有就是下图卫龙首页的例子。 ?...不过本文想要说的并不是设计，而是如何快速定位页面中某部分所使用字体名称。所推荐的这款利器名叫「WhatFont」，是一款浏览器插件，支持Chrome、Safari。...与直接使用Inspector不同，使用WhatFont，只要点击激活探测模式，就可以直接探测页面中任意文字部分，不像Inspector那样，会一股脑的把CSS所有属性全都给出来，WhatFont只会返回文字相关的...CSS设置，并且借助myfonts提供的图片文字识别接口，还可以探测图片中的字体。

6.6K2 1

EasyNVR如何自己更改web界面（网页的自定修改）

背景需求很多用户都在使用了EasyNVR，看到EasyNVR自身带有的界面后有这样的需求，就是需要更改一下web前端的一些样式，当前EasyhNVR为3.0版本，web前端为了增加前端的运行效率和减小项目体积...，使用的vue+webpack进行打包。...这样给那些自身需要更改样式的用户自身更改就增加了难度。 ?...如何将2.7版本的前端界面配3.0版本的EasyNVR使用起来？针对这个问题我们首先需要搞清楚EasyNVR的软件包里面的目录结构。...由于我们使用的是http-server启动的web页面，而我们的起的服务的默认端口是8080。这就和我们的调用接口的10800端口产生了冲突。

1.3K1 0

使用 Chrome 浏览器调试 WebView 中的网页

首先，要在 Android 代码中打开调试的开关： webview.setWebContentsDebuggingEnabled(true); (注意：API level 要在 19 以上才有用。)...然后呢，运行 Android 程序，再打开 Chrome 浏览器，在地址栏输入 chrome://inspect/#devices，回车，然后找到这个 device，点击“inspect”，就欧了。

1.5K3 0

使用 webfontloader 优化加载字体在网页中的显示体验

继上篇文章网页字体文件最后再加载实现方法，后写的一篇优化加载字体在网页中的显示体验。...上一篇文章的第一种方法，我在使用后，发现网页主体中的文字显示会延迟一段时间再加载，于是为了改进，又上网搜索相关内容，得出了本篇文章，优化方案。...，否则就先使用默认字体，这样就可以在不影响用户阅读的情况下也可以加载字体，用户体验相对较好。...}, inactive: function() { // 字体加载失败后执行的回调函数 } }); 一个项目中的使用示例：将样式创建好，然后使用webfontloader进行监听加载...//最后加载字体，防止网页加载速度 // 创建一个新的标签 var style = document.createElement('style');

1.4K3 0

前端调试必备：CHROME CONSOLE控制台的使用：诊断并记录

chrome console控制台日志记录是检查您的页面或应用程序的功能的强大方法。我们从console.log（）开始，探索其他高级用法。...一个简单的Assertions和它如何显示只有当属于list元素的子节点数大于500时，以下代码才会在控制台中导致错误消息。...如何在控制台中显示断言失败：字符串替换和格式传递给任何日志记录方法的第一个参数可能包含一个或多个格式说明符。格式说明符由一个％符号和一个字母组成，该字母指示适用于该值的格式。...试试这个代码：让你的输出字体是蓝色的，而且是large的将DOM元素格式化为JavaScript对象默认情况下，DOM元素以HTML的表示形式登录到控制台，但是有时您想要以JavaScript对象的形式访问...您可以使用％o字符串说明符来执行此操作（请参阅上文），或者使用console.dir来实现相同的操作：本文内容来自：chrome console控制台的使用：诊断并记录 – Break易站

3K10 0

Chrome开发，debug的使用方法。

怎样打开Chrome的开发者工具？...你可以直接在页面上点击右键，然后选择审查元素：或者在Chrome的工具中找到：或者，你直接记住这个快捷方式： Ctrl+Shift+I (或者Ctrl+Shift+J直接打开控制台)，或者直接按F12...注意是在你打开Chrome开发者工具后发起的请求，才会在这里显示的哦。...Audits标签页这个对于优化前端页面、加速网页加载速度很有用哦（相当与Yslow）：点击run按钮，就可以开始分析页面，分析完了就可以看到分析结果了：它甚至可以分析出页面上样式表中有哪些CSS是没有被使用的哦...而对于web开发者来说，Chrome对于Html5、CSS3等一些新标准的支持也是比较完善的，而且Chrome的开发者工具我个人认为真的非常好用，这就是为什么我向web开发者推荐使用Chrome的原因。

1.8K10 0

如何优雅的使用 JavaScript 控制台

0写在前面 JavaScript 最基础的 debug 工具之一就是console.log()。console也自带其他一些其他有用的方法，可以丰富开发者的 debug 工具包。...2 输出文本在控制台记录文本 console对象最常用的一个元素是console.log。很多场景下，你都需要使用它来完成工作。...不过，在 Chrome 中warn有一个黄色的背景。这些视觉上的区别能让你快速区分控制台上的错误信息或者警告信息。你要确保它们在准生产环境中会被移除，除非你想警告那些在你的代码下出错的开发者。...输出一个对象 Chrome 用户请注意：这是我同事提醒我注意的，上面这些table方法的例子在 Chrome 中似乎行不通。你可以通过将需要展示的对象或者数组再放到另外一个数组中解决这个问题。...但它也是最有用的方法之一（尤其是对于使用Redux Logger的开发者）一个基础的调用方式看起来是这样：它将会输出多个层级并且根据浏览器的不同，显示也有所不同。

1.7K2 0

如何更改谷歌Chrome浏览器70新标签页按钮的打开位置

谷歌在Chrome 69中莫名其妙的将新建标签按钮移到了标签的最左侧，打破了很多用户的使用习惯，真的是反人类的设计。不过在新发布的Chrome 70中，谷歌为用户增加了选择的权利。...现在，用户可以自己设置新建标签页按钮的位置，可以在最左侧，最右侧以及标签的右侧。...如何更改Chrome新标签按钮的位置打开谷歌的Chrome浏览器，在地址栏输入“chrome://flags”并回车，打开Chrome隐藏的设置。...在搜索框输入“New tab”，可以看到“New tab button position”，然后单击右侧的下拉列表。 ? 如上图所示，有一些选项。...默认情况下，按钮会在最后一个标签页的右侧，你可以自由的选择按钮的位置。重新启动浏览器后更改生效。

6.9K0 0

网页中如何获取客户端系统已安装的所有字体？

如何获取系统字体？...注：如果需要加上选中后的事件，在onChange中改变成你自己的相应事件处理即可。以上对客户端的开发有用，如果需要服务器端的字体，继续往下看，否则略过即可。 4.如何将我的系统字体保存为文件？...（对于服务器端开发略有小用）（1）如果你的服务器的字体配置与你现有电脑字体配置一样的话，使用Javascript脚本，然后COPY至写字板或记事本，再保存。...);" 步骤四：保存你的网页，刷新它，再试试看。...(2)使用C#代码获取服务器系统中的字体（暂时略过，有空再写）。它的优点是可以直接获取服务器端的字体，以保持开发的一致性。

8.5K3 0

chrome插件开发教程

越来越多的前端开发人员喜欢在Chrome里开发调试代码，Chrome有许多优秀的插件可以帮助前端开发人员极大的提高工作效率。...这是一个开发者最喜欢的Firefox扩展Firebug的精简版。 JQuery 扩展 jQuery扩展让你在当前网页中运行JavaScript和jQuery命令。...如果是在Chrome的控制台里的资源选项里查看代码则推荐使用Chrome自带的"pretty print"功能，也就是点击"{ }"图标。...WhatFont 用于查看当前页面使用了哪些字体，Firebug和Webkit Inspector也可以查看字体，但是远没有WebFont方便，WebFont可以通过把鼠标悬停在元素上来查看字体。...IE Tab 在Chrome中打开IE浏览器标签页，你可以打开一个标签来运行Internet Explorer，让你看到的网页在IE浏览器看起来如何。

2.4K3 0

最新版本的 Chrome 浏览器如何设置网页编码？

问题描述：　　由于使用频率较低，以及促进网页编码规范，Chrome 浏览器在 55 版本以后删除了手动设置网站编码的功能。　　...但是对于部分没有设置编码或编码设置不正确的网站，新版 Chrome 浏览器可能会因为无法准确判断其使用的编码，导致网站显示乱码，本文说明如何解决这个问题。...实操步骤：　　第一步：打开 chrome 网上应用店　　第二步：在搜索栏输入【Charset】，如下图所示： ? 　　第三步：点击【添加至 Chrome】，添加成功后截图如下： ? 　　...第四步：鼠标左键点击【Charset扩展程序图标】，会弹出下图所示的编码设置功能，选择和设置编码即可： ?...通过右键菜单设置网页编码：以后我们可以在网页中点击鼠标右键，在弹出的菜单上选择 "Charset"，也可以选择和设置编码了。 ?

7.6K1 0

如何使用 MSBuild Target（Exec）中的控制台输出

如何使用 MSBuild Target（Exec）中的控制台输出发布于 2018-06-13 00:08...更新于 2018-09-01 00:03 我曾经写过一篇文章如何创建一个基于命令行工具的跨平台的 NuGet 工具包，通过编写一个控制台程序来参与编译过程。...我在如何创建一个基于 MSBuild Task 的跨平台的 NuGet 工具包中提到了使用 Output 来将 Task 中的参数输出出来。而 Exec 也是这么做的。...由于使用 @(Item) 来获取项时，会得到一个用 ; 分隔的字符串，所以不难想到我们控制台输出的字符串使用 ; 分隔即能满足我们的转换需求。但事实上这是不行的！...于是，建议直接在控制台程序中使用换行符本身作为分隔符，这样便可以去除这样的限制。因为 CreateItem 也是支持换行符分隔的。

2.9K1 0

如何使用ChromeCookieStealer通过开发者工具收集和注入Chrome Cookie

ChromeCookieStealer是一款功能强大的Cookie数据收集和注入工具，该工具需要配合Chrome使用，能够利用Chrome的远程DevTools（开发者工具）协议实现浏览器Cookie的数据收集...该工具支持使用Chrome自己的格式并以JSON对象形式转储Cookie数据，Cookie数据的加载和注入同样使用的是这类数据格式。该工具仅供安全研究和测试使用，请勿将其用于其他目的。...由于该工具基于Go语言开发，因此我们首先需要在本地设备上安装并配置好Go语言环境。.../cookies.json （向右滑动，查看更多）下列命令可以将转储的Cookie数据注入到研究人员的本地浏览器中： # 使用一个调试端口启动Chrome，具体可参考上面的命令 ....许可证协议本项目的开发与发布遵循BSD-3-Clause开源许可证协议。

9311 0

如何使用虚拟机的串口和控制台

qemu提供了控制台console和串口serial用来与虚拟机进行交互通讯。本文讲述如何通过console进入虚拟机的控制台，以及如何通过serial与虚拟机进行串口通讯。.../ttyS* 在主机上进入虚拟机的控制台 # virsh console cvm --devname serial0 也可以连接其他的console：# console cvm --devname console1...*要进入虚拟机的控制台只能通过console设备，不能通过serial设备（可以通过serial0，因为serial0也是一个console设备） *要通过virtio类型的console进入虚拟机的console...，不需要对虚拟机做任何修改，要通过serial类型的console进入虚拟机的console，需要在虚拟机的cmdline中添加console=ttyS0 串口在主机上的重定向虚拟机的串口在主机端可以实现重定向功能...以重定向到PseudoTTY的方式演示串口通讯：给虚拟机添加一个pty类型的串口（第一个pty串口默认给console使用，这里用第二个串口）

6.2K2 1

如何使用PS更改任意图片中的文字

前言可能你们看见今天的题目有点奇怪，这有什么不会的。但你们可能误会了。...今天的缘由是，我在做好一张图片时，其中组合图里面的一张小图里面的一个标签需要更改，但我找不到原始文件，不知道这个字体是什么字体，所以没办法跟原图匹配上一模一样的字体。...为了一个标签，又重新去组图，是一件很麻烦的事情，所以呢，就有了今天的推文！参考文献： Wang, Q. S., Gao, L. N., Zhu, X....打开我们需要改正标签的图片，找到我们需要改正的地方 ? 2. 使用矩形选框工具选中字体 ? 3. 选择匹配字体 ? 4. 显示出了图中所用的字体 ? 5. 上面的目的就是为了知道用的图片什么字体。...然后我们新建一个文本，输入进去标签，直接选择图片使用的字体 ? 6. 使用套索工具，选中之前的文本，进行内容填充识别 ? ? 7. 选择内容识别，确定 ? 8. 然后再把做好的字体移动过去就可以了。

13.3K1 0

点击加载更多

如何使用Chrome的开发者工具检查网页故障

如何妥善的设置网页的字体

Chrome扩展插件的开发--获取网页Cookies

Chrome扩展插件的开发--获取网页Cookies

网络字体@font-face 如何处理网页中的特殊字体

如何快速识别出网页上的字体 | 利器

EasyNVR如何自己更改web界面（网页的自定修改）

使用 Chrome 浏览器调试 WebView 中的网页

使用 webfontloader 优化加载字体在网页中的显示体验

前端调试必备：CHROME CONSOLE控制台的使用：诊断并记录

Chrome开发，debug的使用方法。

如何优雅的使用 JavaScript 控制台

如何更改谷歌Chrome浏览器70新标签页按钮的打开位置

网页中如何获取客户端系统已安装的所有字体？

chrome插件开发教程

最新版本的 Chrome 浏览器如何设置网页编码？

如何使用 MSBuild Target（Exec）中的控制台输出

如何使用ChromeCookieStealer通过开发者工具收集和注入Chrome Cookie

如何使用虚拟机的串口和控制台

如何使用PS更改任意图片中的文字

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐