gpt4 book ai didi

css - Mobile Safari Leading/Line-height 问题(使用@font-face)

转载 作者:太空宇宙 更新时间:2023-11-03 18:53:20 26 4
gpt4 key购买 nike

我正在开发一个响应式网站,但我自己没有移动设备。 (仍然生活在黑暗时代)不管怎样,我的同事给我发了一张 ipad 上网站的屏幕截图。

前导/行高很糟糕,但在常规 Safari 中看起来不错。这是一些相关的(我认为)CSS:

@font-face {font-family: 'Rubrik-Regular';src: url('fonts/237360_5_0.eot');src: url('fonts/237360_5_0.eot?#iefix') format('embedded-opentype'),url('fonts/237360_5_0.woff') format('woff'),url('fonts/237360_5_0.ttf') format('truetype'); font-style: normal; font-weight: normal; }
@font-face {font-family: 'Rubrik-Medium';src: url('fonts/237360_6_0.eot');src: url('fonts/237360_6_0.eot?#iefix') format('embedded-opentype'),url('fonts/237360_6_0.woff') format('woff'),url('fonts/237360_6_0.ttf') format('truetype'); font-style: normal; font-weight: bold; }
@font-face {font-family: 'Rubrik-Bold';src: url('fonts/237360_7_0.eot');src: url('fonts/237360_7_0.eot?#iefix') format('embedded-opentype'),url('fonts/237360_7_0.woff') format('woff'),url('fonts/237360_7_0.ttf') format('truetype'); font-style: normal; font-weight: bold; }

html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}

html{font-size:81.25%;-webkit-text-size-adjust:81.25%;-ms-text-size-adjust:81.25%} /* shrink to ~13px body font without changing all other sizes */
/* 16px base font size with 162.5% (26px) line height */
body, button, input, select, textarea { font: 1em/1.6154em 'Rubrik-Regular', Arial, Verdana, sans-serif; color: #262626; }

这是一个并排比较:

Mobile vs Desktop Safari

live demo link

为什么不遵守行高?

最佳答案

这似乎已经解决了:

html{ font-size: 16px; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%} 

我曾错误地尝试像这样调整字体大小:

html{ font-size: 82.5%; -webkit-text-size-adjust:82.5%; -ms-text-size-adjust:82.5%} 

尺寸调整参数偷偷地破坏了我在移动设备上的排版。

关于css - Mobile Safari Leading/Line-height 问题(使用@font-face),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14226112/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com