字体大小随着刷新而改变

问题描述

当我最初加载我的网站时，字体大小都是正常的，但是当我刷新时，大小几乎翻倍，并且不会恢复正常。我已经检查了使用Ctrl +和Ctrl-改变字体的大小，将字体改回到正常大小（默认大小的90％或110％）。

验证。

======从作者评论加入======

  h1 {
 .fontSize（10）; 
} 
 
 h2 {
 .fontSize（4）; 
} 
 
 body {
 .fontSize（2）; 
} 
 
 .fontSize（@sizeValue）{
 @remValue：@sizeValue; 
 @pxValue：（@sizeValue * 10）; 
 font-size：〜@ {pxValue} px; 
 font-size：〜@ {remValue} rem; 
 
  

解决方案

Chrome，

同时尝试在body标签上使用em而不是rem，或将font-size应用于包装元素

  body> div {
 font-size：1.4rem 
} 
  

a href =https://stackoverflow.com/a/20173967/2459418> https://stackoverflow.com/a/20173967/2459418

When I initially load my website the font sizes are all normal, but when I hit refresh the size almost doubles, and does not go back to normal. I've checked changing the font size using Ctrl+ and Ctrl- That changes the font back to a normal size (90% or 110% of the default size).

Everything validates.

http://mylivingspacefinder.com/

======Added from author's comment======

Here's the text-size rules:

h1 {
    .fontSize(10);
}

h2 {
    .fontSize(4);
}

body {
    .fontSize(2);
}

.fontSize(@sizeValue) {
  @remValue: @sizeValue;
  @pxValue: (@sizeValue * 10);
  font-size: ~"@{pxValue}px";
  font-size: ~"@{remValue}rem";
}

解决方案

This is a known bug in Chrome, https://code.google.com/p/chromium/issues/detail?id=319623

Meanwhile try using em instead of rem on the body tag or apply font-size to a wrapper element

body > div {
  font-size: 1.4rem
}

as seen here https://stackoverflow.com/a/20173967/2459418

这篇关于字体大小随着刷新而改变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！