首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在Safari或移动浏览器中不呈现字体

是由于浏览器的字体渲染机制导致的。具体来说,移动浏览器和Safari浏览器在加载网页时,会根据网页中指定的字体进行渲染,如果指定的字体在用户设备上不存在或无法加载,则会导致字体无法显示。

为了解决在Safari或移动浏览器中不呈现字体的问题,可以采取以下几种方法:

  1. 使用Web安全字体:Web安全字体是指在大多数操作系统和浏览器中都能够正常显示的字体,如Arial, Helvetica, Times New Roman等。通过使用这些字体,可以确保在Safari或移动浏览器中字体能够正常呈现。
  2. 使用字体嵌入技术:字体嵌入技术可以将字体文件直接嵌入到网页中,确保在任何设备上都能够正确显示字体。常用的字体嵌入技术包括@font-face和Google Fonts等。通过使用这些技术,可以在Safari或移动浏览器中实现字体的一致显示。
  3. 使用系统默认字体:如果在Safari或移动浏览器中不指定特定字体,浏览器会使用设备的默认字体进行显示。这样可以确保字体在不同设备上都能够正常显示,但可能会影响网页的整体风格和设计。

总结起来,解决在Safari或移动浏览器中不呈现字体的问题,可以采取使用Web安全字体、字体嵌入技术或使用系统默认字体等方法。具体选择哪种方法取决于具体的需求和网页设计。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Oracle,如何移动重命名数据文件?

='ONLINE' ; select * from v$tablespace; 需要注意的是,对于SYSTEM、SYSAUX和UNDO表空间的数据文件的移动重命名,强烈建议关闭数据库进行操作,否则可能会引起意外的错误...RMAN,COPY命令是拷贝数据文件,相当于OS的cp命令,而SWITCH则相当于ALTER DATABASE RENAME用来更新控制文件。...数据库12c R1版本对数据文件的迁移重命名不再需要太多繁琐的步骤。...12c R1,可以使用ALTER DATABASE MOVE DATAFILE这样的SQL语句对数据文件进行在线重命名和移动。...移动数据文件必须进入到相关的容器才可以,否则会报错“ORA-01516: nonexistent log file, data file, or temporary file "12" in the

1.7K20

React中使用ajax获取数据移动浏览器不显示问题

在做的一个小项目,页面加载后使用ajax读取本地REST数据,保存在状态,稍后form的选择下拉框显示,代码如下: 150 componentDidMount() { 151...、火狐浏览器访问,数据都能加载,在手机端使用谷歌浏览器访问,选择下拉框始终为空,这说明手机端浏览器ajax获取数据时出了问题。...javascript$(function() {....}) 是 jQuery 的经典用法,等同于 $(document).ready(function() {....})...,即在页面加载完成后才执行某个函数,如果函数要操作 DOM,页面加载完成后再执行会更安全,所以使用 jQuery 时这样的写法很常见。...可能的原因是手机端刘览器与电脑端浏览器页面加载处理脚本时间不同,前者是未等页面加载结束即执行jquery脚本,后者则相反,所以后者不需$(function(){}也可正常显示。

5.9K20

「译」前端项目中常见的 CSS 问题

---- 浏览器实现用户界面时,最好是尽可能地减小这些差异和问题,以便 UI 呈现出预测的样子。记住所有的这些差异是很困难的,所以我列举了一系列常见问题以及解决方案。...移动端下,浏览器将会出现水平滚动条。 image.png 左边:出现水平滚动条,并且项目没有换行。右边:项目换行,呈两行显示 解决方法很简单。wrapper 应该在空间不足时让项目换行。...透明渐变 当使用透明起点和终点添加渐变的时候, Safari 下会呈现一片漆黑。这是因为 Safari 无法识别关键字 transparent。...我们让浏览器视窗高度等于大于 500 像素的时候才固定顶部。...交互式 HTML 元素的字体生效 给整个文档设置字体的时候,字体并不会应用于诸如 input, button select 和 textarea 这些元素上。

2.1K10

5个你可能不知道的CSS属性

实际上,浏览器等待自定义字体加载的过程,用户一定的时间内只能看到空白的内容。我们知道,如果内容加载过慢,用户将会离开页面。内容空白的时间取决于所使用的浏览器,通常为3秒左右。...如果这段期间自定义字体未加载好,文本会应用备用字体呈现出来。同时,浏览器将无限期地等待自定义字体加载,并且自定义字体加载完成后对文本应用自定义字体。 : 浏览器将立即展示后备字体,同时加载自定义字体。...: 使用自定义字体渲染的文本短时间内 (大约 100ms) 不可见,之后浏览器将持续加载自定义字体,这个期间,文本将以无样式的状态呈现,当自定义字体加载好了之后,文本将会被赋予自定义的字体。...例如,如果一个元素是屏幕外(不可见的),它的所有元素都是屏幕外(不可见的)。典型的用例是移动设备上的屏幕菜单。...:这个值与strict但像,除了包含size。 这个例子的属性如下所示 JSFiddle上也能看到.

1.2K80

5个你可能不知道的CSS属性

了解如何使用自定义字体以及加载它们需要多少时间是非常重要的一点。实际上,浏览器等待自定义字体加载的过程,用户一定的时间内只能看到空白的内容。我们知道,如果内容加载过慢,用户将会离开页面。...block:浏览器等待自定义字体加载时隐藏文本的时间减少了(例如1秒)。如果这段期间自定义字体未加载好,文本会应用备用字体呈现出来。...fallback: 使用自定义字体渲染的文本短时间内 (大约 100ms) 不可见,之后浏览器将持续加载自定义字体,这个期间,文本将以无样式的状态呈现,当自定义字体加载好了之后,文本将会被赋予自定义的字体...例如,如果一个元素是屏幕外(不可见的),它的所有元素都是屏幕外(不可见的)。典型的用例是移动设备上的屏幕菜单。...所有主流浏览器(包括Microsoft Edge)目前都支持它,尽管Internet Explorer支持早期版本规范的不同值。 此外,Safari还支持此CSS属性的供应商前缀版本 。

90020

移动Web 开发的一些前端知识收集汇总

safari私有meta标签,它表示:允许全屏模式浏览,ios上,用户将网页添加到主屏后,再从主屏幕打开这个网页,可以隐藏浏览器的地址栏和下面的toolbar; 第二个meta标签表示:强制让文档的宽度与设备的宽度保持...关闭iOS中键盘自动大写、自动更正、自动完成 iOS,当虚拟键盘弹出时,默认情况下键盘是开启首字母大写的功能的,根据某些业务场景,可能我们需要关闭这个功能,移动版本webkit为input元素提供了...:none;outline:none;} iOS 浏览器横屏时会重置字体大小的问题 iOS 浏览器横屏时会重置字体大小,设置 text-size-adjust 为 none 可以解决ios上的问题,但桌面版...safari字体缩放功能会失效,因此最佳方案是将 text-size-adjust 为 100% 。...-webkit-transform-style: preserve-3d;/*设置内嵌的元素 3D 空间如何呈现:保留 3D*/ -webkit-backface-visibility: hidden

3.8K50

使用CSS提高网站性能的30种方法

本地托管字体的下载和呈现速度明显更快。 Web开放字体格式2.0(WOFF2)是您唯一需要的文件版本。所有现代浏览器都支持这种字体,IE用户可以回到OS字体。...transform:平移(移动)、缩放、旋转等。 浏览器可以使用硬件加速的GPU自己的图层渲染这些效果,这只会影响最终的合成渲染阶段。...更改任何子项的内容时,浏览器将不会重新计算该项目、列表的其他项目页面上的任何其他元素的大小位置。渲染速度更快。 26.尝试渐进式渲染 渐进式呈现是一种为每个页面和组件定义单独样式表的技术。...默认样式创建更简单、线性、类似移动设备的布局。当空间允许时,媒体查询和固有的网格布局可以应用更复杂的桌面设计。 移动的和桌面浏览器彻底测试您的样式。...至少,使用以下内容: 桌面:Firefox、Chrome(Chrome、Edge、Brave、OperaVivaldi)和Safari浏览器 移动的:Android上的Chrome和iOS上的Safari

3.4K20

一篇文章带你了解CSS基础知识和基本用法

suppress 压缩元素的换行。浏览器只在行没有其它有效换行点时进行换行。...:fixed } 10).浮动Float 元素内的内容向某个方向移动 div{ float:left } left 左浮动 right 右浮动 none 浮动 11).溢出Overflow 元素内容超过了框架的大小...div{ overflow:scroll } visible 内容不会被修剪,会呈现在元素框之外 hidden 内容会被修剪,并且其余内容是不可见的 scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容...rotate(1deg); /* Opera */ } 它包含了所有的2D方法和3D方法,并且可以单个设置每一种的方法的x,y轴转向值,比如: rotate(angle) 定义 2D 旋转,参数规定角度...指示矩形框的边缘可被向左移动(西) text 指示文本 wait 指示程序正忙(通常是一只表沙漏) help

11.1K20

移动端web开发笔记

5、 移动端手机号码识别(IOS) iOS Safari (其他浏览器和Android均不会)上会对那些看起来像是电话号码的数字处理为电话链接,比如: 7位数字,形如:1234567 带括号及加号的数字...双击缩放是指用手指在屏幕上快速点击两次,iOS 自带的 Safari 浏览器会将网页缩放至原始比例。...IOS safari下,大概为300毫秒。这就是延迟的由来。...像素点1个变为4个 高清显示屏的位图被放大,图片会变得模糊,因此移动端的视觉稿通常会设计为传统PC的2倍 那么,前端的应对方案是: 设计稿切出来的图片长宽保证为偶数,并使用backgroud-size...如果你不想用户可以选中页面的内容,那么你可以css禁掉: .user-select-none { -webkit-user-select: none; /* Chrome all / Safari

3.5K20

移动端问题收集和解决

产生原因 1、click事件移动端会有300ms的延迟,因为需要检测双击事件。...3D 空间如何呈现:保留 3D*/ -webkit-backface-visibility: hidden; /*(设置进行转换的元素的背面面对用户时是否可见:隐藏)*/ IOS字体大小重置 问题描述...iOS 与 OS X 端字体的优化(横竖屏会出现字体加粗不一致等) iOS 浏览器横屏时会重置字体大小,设置 text-size-adjust 为 none 可以解决 iOS 上的问题,但桌面版 Safari...Safari浏览器input输入框 问题描述 safari下,input输入框,点击时会有一个默认的小人出现,点击后会自动补充联系人的信息 解决办法 只有将其隐藏 input::-webkit-contacts-auto-fill-button...解决办法 实现过程需要注意下面几个问题: 1、真正的输入框的位置计算: 首先记录无键盘时的window.innerHeight,当键盘弹出后再获取当前的window.innerHeight,

1.9K20

移动开发实用

font-family 中文字体使用系统默认即可,英文用Helvetica /* 移动端定义字体的代码 */ body{font-family:Helvetica;} 参考《移动端使用字体的思考》...原因就出在浏览器需要如何判断快速点击上,当用户屏幕上单击某一个元素时候,例如跳转链接, 此处浏览器会先捕获该次单击,但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作...IOS safari下,大概为300毫秒。这就是延迟的由来。...个 高清显示屏的位图被放大,图片会变得模糊,因此移动端的视觉稿通常会设计为传统PC的2倍 那么,前端的应对方案是: 设计稿切出来的图片长宽保证为偶数,并使用backgroud-size把图片缩小为原来的...important;} 最好的解决方案: 整个页面用rem或者百分比布局 消除transition闪屏 网络都是这么写的,但我并没有测试出来 .css{ /*设置内嵌的元素 3D 空间如何呈现

6.4K30

移动Web学习笔记

-webkit-text-size-adjust: 100% 解释: Chrome 浏览器只能设置大于等于 12px 的字体大小,当设置了小于 12px 的字体大小时,浏览器按照 12px 的字体大小渲染字体...移动设备开发过程我们通常会对文本框定义为宽度100%,将其定义为块级元素以实现全屏自适应的样式,但此时你会发现,该元素的边框(左右)各1个像素会溢了文档,导致出现横向滚动条,为解决这一问题,我们可以为其添加一个特殊的样式...自定义滚动条的样式 ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb 滚动条里面的小方块,能向上向下移动往左往右移动,取决于是垂直滚动条还是水平滚动条... 解释:UC浏览器强制使用全屏显示网页 23.... 解释:QQ浏览器强制使用全屏显示网页 24. spellcheck="false" 解释:给类似于textarea

99730

5个你可能不知道的CSS属性

1. font-display font-display属性允许您控制可下载字体完全加载之前呈现的方式,或者下载失败时会发生什么。如何使用自定义字体以及加载它们需要多少时间是非常重要的一点。...block:浏览器等待自定义字体加载时隐藏文本的时间减少了(例如1秒)。因此,默认字体会更快地显示。但是,浏览器将无限期地等待自定义字体加载,并且一旦可用,它就更换字体为自定义。...例如,如果一个元素是屏幕外(不可见的),它的所有元素都是屏幕外(不可见的)。典型的用例是移动设备上的屏幕菜单。...所有主流浏览器(包括Microsoft Edge)目前都支持它,尽管Internet Explorer支持早期版本规范的不同值。 此外,Safari还支持此CSS属性的供应商前缀版本 。...与台式机相比,它们有限的RAM和GPU存储器使得一些CSS操作更难以执行(页面加载速度图形影响方面)。如果浏览器可以发生之前知道会发生什么,是不是这样会增加页面的响应性?

92520

css 文字自适应大小_div自适应窗口大小

移动元素,比如改变top,left(jquery的animate方法就是,改变top,left不一定会影响回流),或者移动元素到另外1个父元素。(重绘+回流) 4....px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况 px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是...rem移动端应用可参考淘宝的页面http://m.taobao.com (html的font-size通过动态计算获取) 页面基准320px(20px),html font-size值的计算: [javascript...x的高度,无法确定x高度的情况下以0.5em计算(IE11及以下均不支持,firefox/chrome/safari/opera/ios safari/android browser4.4+等均需属性加么有前缀...) ch:以节点所使用字体的“0”字符为基准,找不到时为0.5em(ie10+,chrome31+,safair7.1+,opera26+,ios safari 7.1+,android browser4.4

3.2K20

前端成神之路-品优购项目(一)

补充 title 和 keywords 未能充分表述的说明....几乎支持所有的浏览器 移动端设备必备良药... 2. 字体图标使用流程 总体来说,字体图标按照如下流程: ? 3....设计字体图标 假如图标是我们公司单独设计,那就需要第一步了,这个属于UI设计人员的工作, 他们 illustrator Sketch 这类矢量图形软件里创建 icon图标, 比如下图: ?...+、iOS Mobile、Safari4.2+; OpenType(.otf)格式 .otf字体被认为是一种原始的字体格式,其内置TureType的基础上,支持这种字体浏览器有Firefox3.5+...SVG字体渲染的一种格式,支持这种字体浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+; 了解了上面的知识后,我们就需要为不同的浏览器准备不同格式的字体

1.7K20

移动端H5页面开发坑点指南

前言 平时的H5移动端开发时,我们难免会遇到各种各样的坑点,这篇文章就带着大家来看看怎么解决,文章较长,建议收藏方便以后查阅!...及Android上无法使用,PC端正常 2.audio元素没有设置controls时,IOS及Android会占据空间大小,而在PC端Chrome是不会占据任何空间 问题4:Safari浏览器自动播放...a,button,input,textarea{ -webkit-tap-highlight-color: rgba(0,0,0,0); } 浏览器后退刷新 这种情况是以前遇到的,这里也说下;...)问题 iOS浏览器横屏时会重置字体大小,设置text-size-adjust为none可以解决iOS上的问题,但桌面版Safari字体缩放功能会失效,因此最佳方案是将text-size-adjust...)标签绑定点击事件无效 iOS(safari)有时候某个标签绑定点击事件无效,加上空的onclick=""就好了,如: ioslocation.href跳转页面空白 location.href外套一层

3K10

Cloudflare的HTTP2优化策略

文档引用的脚本可能有以下几种不同的行为:如果脚本被标记为“异步”“延迟”,则浏览器可以继续处理文档并在脚本可用时运行脚本代码;如果脚本没有被标记为“异步”“延迟”,则浏览器必须停止处理文档,直到脚本下载完成并被执行才会继续处理文档...如上所述,浏览器呈现全部网页内容之前的页面加载时期,会在CSS上被阻止并阻止HTML的部分的JavaScript;所以在这一期间最好使用全部连接带宽以充分下载被阻塞的资源,并按照HTML...我们的示例,由于图像加载过程被推迟到样式表加载完成之后,因而最终的实际加载过程会略快于Safari。 第6秒,背景与产品图像的模糊版本构成了网页的大致内容。...其整体观感和Safari第8秒时的加载效果与采用“最佳加载策略”浏览器的第4秒加载效果相似。...第8秒,字体已加载完毕,文本正常显示的同时图片愈发清晰(其与Safari第11秒时的加载效果与采用“最佳加载策略”浏览器的第7秒加载效果相似)。 剩余的12秒内,产品图像逐渐变得更加清晰。

1.3K30
领券