Question

我正在使用 SASS / SCSS ，并希望创建一个@function/@mixin，它会在给定动态宽度的情况下计算容器的最大可能字体大小。

例如：

<body style="font-size: 10px;">
    <div style="width: 960px;"> <!--This width is dynamic-->
        <span style="font-size: 12.3em">Patrick Rocks</span>
    </div>
</body>

此等式中的未知变量是font-size标记上的<span>。我将其设置为12.3em，这将是123px（相对于<body>标签的字体大小），但这可能会根据letter-spacing font-family或其他方面而改变。也许是因为它的复杂性，最好用JavaScript或PHP来计算它。

Answer 1

您不能在服务器端执行此操作，因为用户的字体可能具有任何尺寸。你必须在javascript中，在浏览器中这样做。

Answer 2

我已经完成了并找到了符合我需求的解决方案。该解决方案仅在以下情况下才有效。

使用的确切文字
正在使用的字体
基于父字体大小的默认宽度

<强>样本： http://wecodesign.com/demos/stackoverflow-7420897.htm

<强> SCSS：

$logoDefaultWidth: 76; /*Pixels*/

@function getFontSize($newLogoWidth) {
    $fontSize: $newLogoWidth/$logoDefaultWidth;
    @return #{$fontSize}em;
}
@function pxToEm($px) {
    @return #{$px/10}em;
}
body {
    font-size: 10px;
}
.logo {
    width: pxToEm($logoDefaultWidth);
}
.logo.s960 {
    font-size: getFontSize(960);
}
.logo.s480 {
    font-size: getFontSize(480);
}

<强> HTML：

<div class="logo s960">Patrick Rocks</div>
<div class="logo s480">Patrick Rocks</div>

<强> TODO：

此解决方案与WebKit（Chrome / Safari）浏览器存在已知问题。 WebKit浏览器渲染@ font-face字体比它们要厚得多，从而使$ logoDefaultWidth不正确。我正在努力尝试找出如何阻止WebKit使字体变得如此粗糙，或者单独计算WebKit。

查找动态宽度的最大字体大小

2 个答案: