我通过 @font-face
使用自定义字体,并且在开发期间我一直在 Chrome 上测试网站。
下面是CSS中字体添加部分,供引用
@font-face {
font-family: 'skarpaltultra_light';
src: url('font/light-webfont.eot');
src: url('font/light-webfont.eot?#iefix') format('embedded-opentype'),
url('font/light-webfont.woff2') format('woff2'),
url('font/light-webfont.woff') format('woff'),
url('font/light-webfont.ttf') format('truetype'),
url('font/light-webfont.svg#skarpaltultra_light') format('svg');
font-weight: normal;
font-style: normal; }
html, body {
height: 100%;
width: 100%;
font-family: 'skarpaltultra_light', Tahoma, Geneva, sans-serif;
font-size: 62.5%;
color: #fff;
}
注意 - 之所以使用 62.5%,是因为我尝试了不同的方式来使字体跨浏览器兼容,并且其中提到的一种设置字体大小的技术为此,然后在页面的其余部分使用 em
调整字体大小
现在我在 Firefox、Edge 等 等平台上打开它。我意识到字体大小都乱七八糟,它们弄乱了我的整个布局。
我今天正要将 beta 版本交给客户,然后发生了这件事。我该如何解决这个问题?
最佳答案
Firefox 和 Chrome 中的字体大小相同。
这是它在两种浏览器中的样子:
如您所见,两种浏览器都将字体大小计算为 93.75px
。
经过几次调整:
h1 {
background-clip: padding-box;
border: 20px double #fff;
color: #fff;
display: inline-block;
font-size: 10em;
left: 50%;
padding: 20px;
position: absolute;
text-align: center;
text-transform: uppercase;
top: 10%;
transform: translateX(-50%);
}
.intro p {
color: #fff;
font-size: 5em;
padding: 50px;
position: absolute;
text-align: justify;
top: 40%;
}
table {
bottom: 10%;
color: #000;
font-size: 3em;
margin-left: 150px;
position: absolute;
}
关于css - 跨浏览器字体大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34059153/