开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

CSS: font在将font-family更改为-apple-system字体后仍为Arial

CSS（层叠样式表）是一种用于描述网页样式和布局的标记语言。在CSS中，font属性用于设置文本的字体样式。当将font-family更改为-apple-system字体后，仍然显示为Arial字体的可能原因有以下几点：

优先级问题：CSS样式具有优先级的概念，可能存在其他样式规则覆盖了font-family属性的设置。可以通过检查其他样式规则或使用!important关键字来提高font-family属性的优先级。
字体加载问题：如果指定的-apple-system字体在用户的设备上不存在或无法加载，浏览器会回退到默认字体，可能是Arial。可以通过使用适用于不同操作系统的字体堆栈来解决这个问题，以确保在不同设备上都能正确显示字体。
浏览器兼容性问题：不同浏览器对字体的支持程度不同，可能存在某些浏览器不支持-apple-system字体或无法正确渲染该字体。可以通过使用其他字体或提供字体的备用选项来解决这个问题。

总结起来，要解决将font-family更改为-apple-system字体后仍为Arial的问题，可以通过调整样式优先级、使用字体堆栈、检查浏览器兼容性等方法来解决。具体的解决方案需要根据具体情况进行调整。

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

腾讯云字体库：提供丰富的字体资源供开发者使用，地址：https://cloud.tencent.com/product/ttc
腾讯云Web+：提供一站式的Web应用托管服务，支持前端开发和部署，地址：https://cloud.tencent.com/product/tcb-webplus
腾讯云CDN：提供全球加速服务，可用于加速静态资源的分发，地址：https://cloud.tencent.com/product/cdn

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

有帮助

没帮助

相关·内容

Web 字体 font-family 再探秘

,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol; CSS-Tricks：font-family: system-ui...font-family 关键字对于 CSS 中的 font-family 而言，它有两类取值。...一类是类似这样的具体的字体族名定义：font-family: Arial 这里定义了一个具体的字体样式，字体族名为 Arial; 一类是通用字体族名，它是一种备选机制，用于在指定的字体不可用时给出较好的字体...以 CSS-Tricks 网站的 font-family 定义为例子： { font-family: system-ui,-apple-system,BlinkMacSystemFont,...ui，在 Windows 及 Windows Phone 上选取系统默认字体 Roboto，面向 Android 和一些新版的的 Chrome OS Helvetica,Arial，在针对不同操作系统不同平台设定采用默认系统字体后

2.5K1 0

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

,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol; CSS-Tricks[4]：font-family...关于字体的基础知识，建议先看看这篇你该知道的字体 font-family[5] font-family 关键字对于 CSS 中的 font-family 而言，它有两类取值。...一类是类似这样的具体的字体族名定义：font-family: Arial 这里定义了一个具体的字体样式，字体族名为 Arial; 一类是通用字体族名，它表示一大类字体（并非单个），类似这样：font-family...以 CSS-Tricks[9] 网站的 font-family 定义为例子： { font-family: system-ui,-apple-system,BlinkMacSystemFont...ui，在 Windows 及 Windows Phone 上选取系统默认字体 Roboto，面向 Android 和一些新版的的 Chrome OS Helvetica,Arial，在针对不同操作系统不同平台设定采用默认系统字体后

4.8K2 0

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

当前屏幕 dpr = 3 ，CSS 宽度为 414px。当前屏幕 CSS 宽度为 414px，则图片 CSS 宽度仍为 300px。...下面就以 CSS-Trick 网站最新的 font-family 为例，看看他们是如何在字体选择上做到适配各个操作系统的 { font-family: system-ui,-apple-system...一类是类似这样的具体的字体族名定义：font-family: Arial 这里定义了一个具体的字体样式，字体族名为 Arial; 一类是通用字体族名，它是一种备选机制，用于在指定的字体不可用时给出较好的字体...以 CSS-Tricks 网站的 font-family 定义为例子： { font-family: system-ui,-apple-system,BlinkMacSystemFont,...ui，在 Windows 及 Windows Phone 上选取系统默认字体 Roboto，面向 Android 和一些新版的的 Chrome OS Helvetica,Arial，在针对不同操作系统不同平台设定采用默认系统字体后

3.1K3 2

CSS中字体相关的小技巧

在项目中添加这样一小块代码后，将在全局中将Helvetica字体替换（alias）为Comic Sans MS字体（或是Chalkboard SE字体，取决于浏览器支持）。...在菜单栏中，选择 View➡ShowFontInfo后，右侧的面板中会显示该字体的PostScript名称及完整名称。 ?...因此如果你看到了 fantasy字体，说明重命名没有生效。在苹果的产品中（San Francisco应当是可用的）fantasy 会被渲染为Papyrus。...将local(-apple-system)重命名为San Francisco在Safari移动端和桌面端得到支持，在Chrome和Firefox（截止至54）中尚未支持。...同样也不再需要在你的CSS中为 font-family属性赋其他杂乱的值了。简单而有效！

1.3K4 0

typecho主题Joe魔改版发布（持续更新）

2款字体文件，如果想更改字体的话可以在joe.min.css文件中找到* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color...); font-family: -apple-system, SF UI Text, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei..., WenQuanYi Micro Hei, sans-serif; font-family: nexzhu!...important; }　修改其中两处nexzhu,改为light即可更换字体下载与安装此处内容需要评论回复后（审核通过）方可阅读。...'/assets/img/random/' . rand(1, 25) . '.webp';　　原本缩微图是指向公共的图片为叮当猫，改后直接指向主题文件/assets/img/random/内的图片，主题内的缩微图可自行修改

1.8K2 0

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

在写模板时很纠结字体怎么写，于是找了几个网站抄了下字体配置。但是这个问题还是困扰我心！...项目地址：https://github.com/zenozeng/fonts.css DEMO：https://zenozeng.github.io/fonts.css/ 这个项目罗列了三种字体：黑体，...楷体，宋体使用方法，以楷体为例故天将降大任于是人也必先苦其心智劳其筋骨饿其体肤空乏其身行弗乱其所为所以动心忍性曾益其所不能也可以简单粗暴的把它里面的字体配置复制出来...，放到自己的css的body中,下面以黑体为例 body{ font-family: -apple-system, "Helvetica Neue", Helvetica, "Nimbus Sans L

8921 0

解决Ubuntu下Chrome中文字体混乱问题！

字符集设置首先，考虑是否是字符集没有设置为 UTF-8。虽然尝试将字符集从 UTF-8 改为 GBK，但未能解决问题。 2....字体问题考虑到字体是否不支持中文字符，又尝试下载字体，在生成 echarts 图的时候同时设置引入字体。也没有解决问题。 4. 系统中文字体支持最终在 Chrome 设置中发现系统中缺少中文字体。...此时，尝试通过以下步骤安装中文字体： sudo apt-get install fonts-wqy-zenhei fc-cache -f -v * { font-family: -apple-system..., "Noto Sans", "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC",...即使在浏览器端进行各种调整，如果系统本身不支持中文字符集，问题仍无法解决。因此，确保系统中安装了适当的字体是解决类似问题的关键步骤。从前ing

9421 0

不用JS，教你只用纯HTML做出几个实用网页效果

在我们以往看到的页面效果中，很多效果是需要JS搭配使用的，而今天在本文中，我将介绍如何使用纯HTML打造属于自己的实用效果。 1.... CSS * { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe...: body { margin: 50px; } label { padding-right: 10px; font-size: 1rem; font-family: -apple-system...在移动浏览器上打开它，弹出的键盘将发生变化，同样的email也是如此。 search 将输入文本框设置为友好的搜索样式。效果： ?...例如：您希望在您的页面中加入Excel功能，可以尝试纯前端表格控件SpreadJS，再或者您希望为用户提供更完备、更高效的前端UI控件，您也不妨可以试试WimoJS。想信她们都能为您的应用增色不少。

2.3K4 0

iconfont字体图标库

(1) { font-family: 'Microsoft YaHei'; } .font-demo p:nth-child(2) { font-family: Arial; }...为什么字体设置为Arial页面展示的文字是Arial的样式，设置成Microsoft YaHei就展示成Microsoft YaHei的样式？具体原因请看下面的例子。 <!...(1) { font-family: 'Microsoft YaHei'; } .font-demo p:nth-child(1) { font-family: 'Arial';...分析： 1 微信小编把'HTML5学堂'和'摩登足迹'这几个字改为unicode编码，此时页面上仍然能以微软雅黑字体展示为HTML5学堂。 2 使用浏览器打开页面时，浏览器会解析HTML文件进行渲染。...3 浏览器再根据CSS里面设置的font-family查找对应的字体文件。如果CSS里面没有设置字体，就会使用浏览器的默认设置。如果有自定义字体@font-face网络字体，则加载对应字体文件。

5.4K6 0

谈谈一些有趣的CSS题目（十二）-- 你该知道的字体 font-family

开本系列，谈谈一些有趣的 CSS 题目，题目类型天马行空，想到什么说什么，不仅为了拓宽一下解决问题的思路，更涉及一些容易忽视的 CSS 细节。...这也很好解释了，font-family 中的 family ，家庭的意思，也就是不单单指一个，而是可以指定多个，上述 5 个英文单词都是 font-family 的可用取值，下文还会详细讲到。...Verdana 无衬线字体，优点在于它在小字上仍结构清晰端整、阅读辨识容易。...所以通常会转化成对应的英文写法或者是对应的 unicode 编码，font-family:'宋体' -> font-family: '\5b8b\4f53'。...举个栗子： body { font-family: tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif; } 别看短短 5 个字体名

1.1K3 0

Custom Beautify

找到满意的字体后点击进入字体详情页：可以在右侧找到Select this style字样的按钮，之后能在侧边栏看到引入内容，分别是字体的API引入链接和font-family写法首先需要引入样式...当然，在控制台添加的样式是暂时的，我们在预览觉得满意后，就可以把font-family写进来custom.css了这个font-family的写法表示主字体用'Zhi Mang Xing'，若字体包内没有相应字体...形如： font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Lato, Roboto, "PingFang...当然，在控制台添加的样式是暂时的，我们在预览觉得满意后，就可以把font-family写进来custom.css了关于font-display属性，这是一个新的CSS属性,可以让自定义字体的显示更加顺滑...形如： font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Lato, Roboto, "PingFang

2.3K2 0

CSS魔法堂：再次认识font

三、再识font-family　　　　　　　　　　　　　　　　　　　　　　通过CSS样式属性font-family我们可以按需设置网页中文字采用的字体库系列，如 font-family: "Microsoft...-- 在IE下浏览 --> 微软雅黑 Simsun .b1{ font-family...类族名称(generic-family)后的字体族名称(family-name)不会生效,如:A是 font-family:arial,sans-serif,"宋体" ,B是 font-family:arial...,"宋体",sans-serif 而浏览器默认字体为"微软雅黑",那么将A通过微软雅黑显示中文,而B则用宋体显示中文.这是因为搜索到sans-serif就已经在浏览器默认字体库中找到字体了,因此不会搜索宋体字库...6. 3种设置font-family的思路！ a). 无为而治就是设置好西文字体后，让浏览器/用户自行决定中文字体。

2.3K10 0

Safari浏览器统一字体之自定义CSS样式表

这段CSS的主要目的是针对Safari浏览器自定义的样式表，实现了大部分全局样式尤其字体的统一设定，字体设定为系统字体。.../* 设置根元素的字体和代码字体变量 */ :root { --font-family: -apple-system; /* 使用系统默认的字体 */ --code-font-family...important; /* 在Webkit浏览器中启用字体抗锯齿 */ } /* 为HTML元素设置字体和文本渲染优化 */ :where(html) { font-family: var(-...; /* 长单词或URL在必要的时候可以换行 */ } /* 为常见的文本和列表元素设置字体 */ :where(body, p, h1, h2, h3, h4, h5, h6, ol, ul, blockquote...important; /* 使用代码字体变量 */ font-size: 1em; /* 代码字体大小设置为1em */ } /* 排除伪元素和特定类名的元素，为其他元素设置字体 */ :not

4310 0

CSS基础03-CSS字体属性

03-CSS字体属性 CSS Fonts（字体）属性用于定义字体系列、大小、粗细、文字样式（如斜体等）。 3.1字体系列 CSS使用font-family属性定义文本的字体系列。... p { font-family: Arial, 'Microsoft Yahei', '微软雅黑'; } 各种字体之间必须使用英文逗号相隔一般情况下，如果使用了由空格隔开的多个单词组成的字体...，根据先后顺序依次查看系统是否支持，若不支持则查看后一个，若全都不支持则使用系统默认的字体显示实际开发中，字体设置常用于标签来将整个页面中的字体全部修改掉 3.2字体大小 CSS使用 font-size...，多用于取消和标签的斜体），italic（斜体）注意：我们很少用于给文字加斜体，反而多用于使用normal来取消斜体 3.5字体复合属性字体属性可以把以上的样式综合来写，更节约代码 <...不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family，否则font属性将不起作用

1.9K2 0

css-font

{ font-family: Arial, "Microsoft YaHei UI";}font-sizeh3 { font-size: 20px;}谷歌浏览器默认的文字大小为16px可以给...font-weight: lighter; /定义更细的字符。...font-weight: initial; /将此属性设置为其默认值。...{ font-style: normal; font-style: italic;}normal 文字不倾斜italic 文字倾斜平时我们很少给文字加斜体，反而要把斜体标签(em,i)改为不倾斜字体...font-size font-family

3510 0

【移动端网页布局】流式布局案例 ① ( 视口标签设置 | CSS 样式文件设置 | 布局宽度设置 | 设置最大宽度 | 设置最小宽度 )

在移动端网页布局中 , 网页布局宽度 = 移动设备宽度 , 因此在进行布局时 , 可以为网页布局的主体标签设置 100% 宽度 ; 2、设置布局最大宽度将京东手机端页面 , 拉倒最大便不再放大..., 如下图所示 , 这是因为该页面设置了最大像素 ; 一般移动端页面最大像素设置为 980 像素 ; 3、设置布局最小宽度将京东的手机端页面宽度压缩到最小 , 如下状态时 , 就不能再进行压缩了...14 像素 */ font-size: 14px; /* 如果是苹果就是用苹果默认字体如果不是苹果手机就使用后啊面的字体 */ font-family: -...apple-system, Helvetica, sans-serif; /* 字体颜色 */ color: #666; /* 行高 */ line-height: 1.5...14 像素 */ font-size: 14px; /* 如果是苹果就是用苹果默认字体如果不是苹果手机就使用后啊面的字体 */ font-family: -

2.4K1 0

CSS编码规范建议

示例： font-family: Arial, sans-serif; 1.4 行长度 [建议] 每行不得超过 120 个字符，除非单行不可分割。解释：常见不可分割的场景为URL超长。...[强制] font-family 属性中的字体族名称应使用字体的英文 Family Name，其中如有空格，须放置在引号中。...解释：所谓英文 Family Name，为字体文件的一个元数据，常见名称如下：示例： h1 { font-family: "Microsoft YaHei"; } [强制] font-family...解释：更详细说明可参考如何保证网页的字体在各平台都尽量显示为最高质量的黑体？...将 line-height 设置为数值，浏览器会基于当前元素设置的 font-size 进行再次计算。

8134 0

CSS编码规范

示例： font-family: Arial, sans-serif; 2.4 行长度 [强制] 每行不得超过 120 个字符，除非单行不可分割。解释：常见不可分割的场景为URL超长。...示例： /* good */ .post { font: 12px/1.5 arial, sans-serif; } /* bad */ .post { font-family: arial...[强制] font-family 属性中的字体族名称应使用字体的英文 Family Name，其中如有空格，须放置在引号中。...示例： /* good */ body { font-family: Arial, sans-serif; } h1 { font-family: Arial, "Microsoft...解释：将 line-height 设置为数值，浏览器会基于当前元素设置的 font-size 进行再次计算。

1.4K4 1

优化 CSS 代码的12个小技巧

避免过多 font-family 为每个选择器去定义字体并不是一个好的办法，它会导致代码很难维护，假如以后想要更改字体，就不得不在每个选择器中更改它。...因此不要像下面这样来定义字体： h1 { font-family: Arial, Helvetica, sans-serif; } p { font-family: Arial, Helvetica..., sans-serif; } .selection { font-family: Arial, Helvetica, sans-serif; } .footer { font-family...; } 如果页面中很多部分的字体都不尽相同，就可以将字体定义在 class 中，然后在需要的HTML标签上使用该class即可： .font-helvetica { font-family: Arial...在这种情况下，可以指定使用其他备用字体： p{ font-family: 'Open Sans', Arial, Helvetica, sans-serif; } 这样，浏览器就会按顺序进行解析，

5204 0

【编码规范】CSS编码风格指南

示例： font-family: Arial, sans-serif; 2.4 行长度每行不得超过 120 个字符，除非单行不可分割。解释：常见不可分割的场景为URL超长。...font-family 属性中的字体族名称应使用字体的英文 Family Name，其中如有空格，须放置在引号中。...示例： /* good */ body { font-family: Arial, sans-serif; } h1 { font-family: Arial, "Microsoft YaHei...", sans-serif; } /* bad */ body { font-family: arial, sans-serif; } h1 { font-family: Arial,...解释：将 line-height 设置为数值，浏览器会基于当前元素设置的 font-size 进行再次计算。

1K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭