文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

web字体规范

但对于前端页面的终极使用者，他们可能系统没有这些字体，那么对于这些特殊字体究竟该如何处理？ 本文通过与设计，产品，前端的统一沟通，达成共识如下。...css约定了五种都会支持的字体，另外不同系统也会支持不同的字体，汇总如下表格。...@font-face文件 由于网页中使用的字体类型，也是各浏览器对字体类型有不同的支持规格。...TrueType（.ttf）：Windows和Mac系统最常用的字体格式，其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体，这使得它们比基于矢量的字体更容易处理，保证了屏幕与打印输出的一致性...SVG字体就是使用SVG技术来呈现字体，还有一种gzip压缩格式的SVG字体。

3.4K40
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    单屏页面响应式适配玩法

    适配 上面的方式已经把效果做出来了，接下来就是响应式适配了。...所以不管在哪种系统下，浏览器的宽度与分辨率是保持一致的（程序坞在底部的时候，程序坞在左右两边一般情况对宽度没有影响），高度则根据系统及浏览器的不同各有不同，比方说 Safari 没有书签高度。...不同系统加浏览器占用的最高高度约为 180，最小约为 0（全屏的时候） 4、主流系统分辨率尺寸 然后我们看下当前主流系统及分辨率有哪些 PC & MAC & Chrome 常用 1280 x...& Windows & Chrome （或 PC & MAC & Chrome & 外设显示器） 1280 x 720/1024 1366 x 768 1440 × 900 1600...8.1、尝试 rem + vh 方案 一开始想的是 rem + vh 结合使用，根元素 html 使用 vh，其他单位则使用 rem，然后找到有问题的宽高比，通过 @media 方式设置 html 为

    2.4K20

    网络安全自学篇（十三）| Wireshark抓包原理（ARP劫持、MAC泛洪）及数据流追踪和图像抓取（二）

    3.交换机环境 交换机环境是更加常见的方式，包括端口镜像、ARP欺骗、MAC泛洪。 （1）端口镜像 交换机是一种数据链路层甚至网络层的产品，它的转包接包严格按照交换机上的MAC地址表通信。...所以正常情况下，PC2和PC3通信流量是很难流到PC1的网卡上。当PC2和PC3通信时，PC1是无法通过Wireshark抓到包。...最后PC2会将流量封装成底层的MAC1回复过去。...10.数据包操作包括数据包标记、注释数据包、合并数据包、打印数据包、导出数据包，通过不同的协议设置不同的配色方案。 ? 如下图所示修改为红色。 ? 11.文件->打印。 ?...第四步：获取网址对应的IP地址，这里使用IP站长之家实现。IP地址为：47.110.166.107 。 ? 第五步：点击暂停并通过过滤器获取与该IP地址相关的HTTP协议数据包。

    11.4K62

    Web 用户体验设计提升实践

    页面呈现 就整个页面的展示和页面内容的呈现而言，不同的展示方式，所得到的效果截然不同。 这其中有非常多值得注意的细节。...内容应该以什么样的方式呈现？...在移动端或者一些高清的 PC 屏幕（例如苹果的 Mac Book），屏幕的 dpr 可能大于 1。这种时候，我们可能还需要考虑利用多倍图去适配不同 dpr 的屏幕。...很好地结合了一些节日、实事、热点，作为一种比较固定的产品去不断推陈出新，在不同时候带给用户不同的体验。 2.9 字体优化 字体的选择与使用其实是非常有讲究的。...为了保证 Mac 用户的体验，在定义中文字体的时候，先定义 Mac 用户的中文字体，再定义 Windows 用户的中文字体。

    1.9K20

    关于uni-app与vue路由配置的不同，不使用uni.navigateTo接口跳转时，使用this.$router.push的踩坑经验

    今晚我在用uni-app的时候，突然不想用uni-app自己提供的路由跳转方法： uni.navigateTo 我想用vue那种路由的跳转方式，我一开始想了想应该是可以的，毕竟uni-app的内核也是vue.js...uni-app与vue路由配置的不同 经过一个多小时后，我终于发现了问题：（uni-app与vue路由的不同） vue中只针对PC端而言，他的没有pages.json文件中所以不会自动定义此项目的路由的...，所以，当我们用vue写路由时，要有手写路由表的这一重要步骤。...因为uni-app中有pages.json的存在，它在创建每一个vue页面时都可以在pages.json中配置创建的vue页面路径。...非官方接口的另类写法 如果不想用3.说的官方提供的api接口去实现跳转的话，我们可以直接使用this.

    1.3K60

    交换安全包含哪些技术？

    三层端口镜像（ERSPAN：Encapsulated Remote SPAN）： 若通过三层网络互联，以S9300交换机为例，它使用GRE报文头封装和解封装镜像报文，使得镜像报文可以穿透三层网络，从而实现镜像端口所在设备与观察端口所在设备之间通过三层网络相连时的端口镜像...捕获业务报文 在实际项目中，在进行问题定位及分析时，我们可能并不具备在交换机上进行端口镜像的条件，例如管理PC不在机房，工程师通过远程登录的方式连接到网络设备，而如果此时又需要进行报文捕获，那么就可以使用...开始ping PC2时，我们就能在终端界面看到如上输出，上面截取了捕获到的两个报文。...以第一个报文为例，这实际上是一个数据帧，红色字体部分是该帧的目的MAC地址，蓝色字体部分是源MAC地址。...实验验证 在上图中，PC1、PC2、PC3同属VLAN10、同属1.1.1.0/24子网，IP地址如上图所示。配置端口隔离使得PC1与PC2无法互访；PC1与PC3，PC2与PC3可互访。

    80620

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

    即便是PC或Mac用户，有查显示只有一半的人会将浏览器全屏显示，而剩下的一般人使用多大的浏览器，很难预知； 台式机、投影、电视、笔记本、手机、平板、手表、VR……智能设备正在不断增加，“主流设备”的概念正在消失...适配不同屏幕大小其实只需要遵循一条原则，确保页面元素大小的与屏幕大小保持一定比例。...现代浏览器，提供了更好的方式，让我们能够根据设备 dpr 的不同，提供不同尺寸的图片。...而从展示效果层面来说，使用系统字体能更好的与当前操作系统使用的相匹配，得到最佳的展示效果。...涵盖了 iOS、MAC OS X、Android、Windows、Windows Phone 基本所有用户经常使用的主流操作系统。 使用系统默认字体的主要原因是性能。

    3.8K32

    图解：二层与三层交换机之间到底有什么区别?

    这两种类型交换机的工作方式有所不同： 二层交换机可以识别数据包中的MAC地址，根据MAC地址进行转发，并将这些MAC地址与对应的端口记录在自己内部的一个地址表中。二层交换机不遵循路由算法。...虽然 PC1 在第一次通信时知道 PC2 的 IP 地址，但它不知道接收主机的 MAC地址。...同样，当 PC2 在 ARP 响应消息中发送其 MAC 地址时，交换机会收集 PC2 的 MAC 地址并将其存储到自己的 MAC 地址表中。...因此，与不同交换机相连的主机可以共享同一个广播域。 为了更好地理解 VLAN ，我们举个栗子，其中一个使用 VLAN，另一个不使用 VLAN。...当我们只需要简单地将主机终端设备配置到特定的 VLAN 网络时，就会使用访问端口。 如果需要访问多个交换机，且需要访问不同的VLAN，则将接口配置为交换机的中继端口。

    6.2K11

    Flutter for OpenHarmony 简单的应用开发详解：从代码到页面的完整构建流程

    TextStyle 设置字体大小为 24px，颜色为白色（Colors.white）。 ✅ 注意：使用 const 创建不可变对象，提高性能并支持热重载。...每次运行时端口号可能不同（如 58393、52307 等），由系统动态分配。 页面结构分解 1....按下 Ctrl+Shift+F10（Windows）或 Cmd+Shift+R（Mac），即可立即刷新页面。 支持快速迭代开发，极大提升效率。...建议与扩展方向 方向 实现方式 目标 添加路由 使用 Navigator.push() 实现“课件”、“知识点”跳转 增加状态管理 引入 Provider 或 Riverpod 支持动态数据更新 优化适配...使用 MediaQuery 适配手机、平板、PC 部署上线 flutter build web 发布到 GitHub Pages 或云服务器 结语 通过这一系列步骤，我们不仅看到了一个简单的“小晚课堂

    15210

    Office2019 (办公套件全家桶)

    OneNote 2019还帮助您以多种方式捕获信息，然后根据需要组织和使用它。...移动 凭借1 TB的云存储，您的文档随时随地都可以使用，因此您可以从中断的地方继续。 office 满足你的需求 使用 office 2019 以更快的全新方式持续执行任务，达到期望结果。...每当我们点击一个Ribbon面板时，office都会自动弹出一个动画特效。整体感觉很像是Win10特有的窗口淡入与淡出。...通常情况下，当我们将一个office窗口从高分辨率显示器移动到低分辨率显示器时，微软都会自动使用一种叫“动态缩放DPI”的技术，来保证窗口在不同显示器间仍保持适合的大小。...亮点功能7：自带中文汉仪字库 之前小编一直很羡慕Wps的云字体功能，尤其在进行一些排版类工作时，这一特性真的非常非常实用。在office 2019中，我发现微软又新增加了几款内置字体。

    3K30

    微软一夜干翻苹果Mac！GPT-4o装进全家桶，微软把全世界PC都AI了

    全新NPU架构，配上地表最强GPT-4o等40+模型，让Windows PC击败苹果Mac，成为有史以来最快、最智能的PC。显然，一个全新的AI时代正式开启。...当你想要找到此前PPT中「用紫色手写字体的图表」时，Recall功能从电脑所有记录中，一秒钟给出了结果。 打工人的办公方式，再次被微软革新了。...Copilot+ PC可以支持长达22小时的本地视频播放，或15小时的网页浏览，甚至让业务程序与Windows 365 Cloud PC配合，提供无缝Windows的极致体验。...微软称Prism增加了支持的应用程序数量，并且比以前的模拟器快了约 20%，甚至可以超过Mac使用的Rosetta 2。...除了兼容旧软件，微软也同步更新了适配Arm与Windows 11的所有自家软件，并将在下个月新PC发货时同步发布。

    40010

    MacOS Catalina终于来了！升级前先来看看有哪些亮点？

    2 照片分类更清楚 照片按年、月、天分类整理，照片预览图尺寸也更大，以及在你滚动浏览时、实况照片和视频会开始自动播放。照片也更智能化了一些，能将生日、周年纪念和旅行等重要时刻呈现出来。...在实际体验当中，使用Sidecar功能时没有明显的延迟，使用感受还是蛮不错的。这个功能很大程度上提升了iPad的生产力和存在感，也提升了Mac的效率。...并且都是用Mac App的原生方式进行运存，相互之间可以随意的拖放。 目前可以使用的App有Asphalt 9、Morpholio、 Jira、Fender等，但是后续应该还会有更多的上线。...新的查找App原理跟之前完全不同，它能使Mac发出蓝牙信号让附近正在使用的Apple设备检测到，这些设备会将你Mac的位置传给iCloud，因此你能在查找App里看到丢失的Mac在哪里。...总结： 除了细节提升让操作使用更方便更实用，macOS Catalina最重要的一点是你能强烈的感受到苹果的电脑与手机平板等产品之间不断的加强融合，比如iPad的可以成为Mac的第二块屏幕、使用Apple

    4.3K30

    Cocos 引擎 UI 全新升级：进一步提升编辑器体验

    新的 UI 字体 在包含大量文字的 Cocos Creator 编辑器中，文字的精准呈现举足轻重。...要在 Windows 和 Mac 上获得可靠一致的体验是一项艰难的挑战，因为不同的操作系统解析渲染字体的方式并不一样。...为了确保优良的视觉效果，我们在 2.2 中升级了编辑器所用的字体，并且对文本样式进行了细心打磨，使得新的字体能够在 Windows 和 Mac 上获得更加一致和精准的定位。...相比其它字体，新的 UI 字体能够满足纯中文和中英文混排的需要，确保文本效果始终出色。...设计理念 此次改版延续了 Cocos Creator 从 1.10 以来的进化方向，我们的设计理念是： >> 高级感：我们希望为用户提供一流的编辑器使用体验，给人精致、高端的感觉，与行业标准保持一致。

    85200

    小谈中文环境下中文排版的font-family 字体选择

    众所周知，由于Windows 与其他平台（Mac、Linux）的不通用性，字体渲染等问题导致在面对中文用户的时候不得不多重考虑；加之中文字体相对于英文字体目前仍然无法采用webfont形式的劣势以及目前移动设备的盛行...但什么样的环境就有不同的适应法则，对于小小的font-family 字体，极力用好当前资源才是王道，并在其他方面提高用户体验的不足。...支持 支持 monospace（等宽） 支持 支持 支持 fantasy（梦幻） 不支持 支持 不支持 cuisive（草体） 不支持 不支持 不支持 当然目前这只是移动设备各系统的支持情况，然而pc...important} 如果是用于全局项目中，那么可能会有所不同，这里直接引用参考资料的代码： /*移动端项目*/ font-family:Tahoma,Arial,Roboto,”Droid Sans...”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,sans-self; /*pc端(含Mac)项目*/ font-family:Tahoma,Arial

    2.9K100

    详解Matplotlib中文字符显示问题

    在用matplotlib进行绘图时，如果在绘制过程中会用到中文，则默认情况下会出现字体警告，中文字符显示为方框或乱码的形式，我们这里将介绍多种解决方案。...3.1.platform模块 3.2.常见中文字体文件名 1.中文字体显示问题 在用matplotlib进行绘图时，如果在绘制过程中会用到中文，则默认情况下会出现字体警告，中文字符显示为方框或乱码的形式...2.几种解决方案 我们在解决中文字符显示问题时，有两类方案多种方式：方案1，在绘图代码中设置全局字符显示字体；方案2，在绘图代码中设置局部字体；方案3，修改本机字符默认配置的字体。...plt.rcParams['axes.unicode_minus'] = False  由于mac电脑默认没有SimHei（黑体）字体，大家可以下载安装该字体或者修改为系统自带的字体如Arial Unicode...修改True为False 2.4.自动区别系统然后选择字体【方便】 核心是以下代码： (引用platform模块获取当前系统 mac or windows ，然后自动选择相应中文字体) # 根据不同的操作系统设置对应的中文字体

    4.9K71

    响应式设计

    来实现(积木中的等比实现方式) 等等 字体自适应 em 相对当前元素的font-size， 如果当前元素没有设置，则继承自父元素 rem 固定根元素上字体大小，其他字体跟随缩放 vm, vh 这两个兼容性不大好...，而且感觉用起来的场景不多 显示或者隐藏内容 display:none 一般实现是在A端上展示在B端上隐藏，或者一块内容使用两种展现形式，其中一种只在A端显示，另外一种只在B端展示 不建议后面一种方式...，两套代码，很蛋疼 排版和布局 通过样式在多端呈现不同的效果 ，如栅栏来实现内容块的等比缩放、或流式布局里面内容依次排列下来 禁止缩放，避免如iphone上显示整个页面 <meta name="viewport...流式布局 这种一般界面比较简单，百分比来控制，一般不够位置挤下来就是了 媒体查询 通过检测屏幕的宽度，从而在不同宽度下通过不同的样式来显示页面。比较方便。...这里一般不会处理太细腻的操作，一般是布局方面的东西，或者就做pc或h5的分支，不会做的太细，否则代码难以维护。 比如积木中使用这个来判断移动端加载哪些css，pc端加载哪些css。

    3.4K100

    Python词云制作

    词云 词云是对文本内容进行可视化呈现的一种方式，它会对文本中出现频率较高的词进行视觉上的突出， 词语出现的频率越高，字体就会越大，颜色也会越醒目。通过查看词云图，我们能快速获取文本中的主要内容。...stopwords=s, //停用词，s是存放着停用词的集合 font_path=mac //中文字体，需要根据自己的电脑系统选择不同系统使用的默认中文字体...: mac = 'PingFang.ttc', win = 'simhei.ttf' ) 第二步：加载词云文本 w.generate() w 是第1步中赋值的变量, 小括号中需要填写字符串 制作中文词云时...jieba库的lcut()方法对中文文本text进行分词 s = ''.join(lst) //使用join()命令，把分词结果用空格拼接成字符串 mac = '...对中文文本进行jieba分词 并把分词结果拼接成字符串 lst = jieba.lcut(text) s = ''.join(lst) //不同系统自带的中文字体

    2.4K10
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券