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

【问题标题】：Find max font-size for dynamic width查找动态宽度的最大字体大小
【发布时间】：2011-11-17 06:23:03
【问题描述】：

我正在使用 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>

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

【问题讨论】：

你能把它归结为一个问题吗？

标签： php javascript sass

【解决方案1】：

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

【讨论】：

我用@fontface 提供我自己的字体，这样我能在服务器端做点什么吗？我发现了一个使用 Java 和一些库的示例，这些库检测了一堆关于字体尺寸的东西；但是，我正在使用 PHP，到目前为止还没有找到任何东西。
如您所见，即使使用@fontface，字体的宽度也取决于渲染引擎、用户设置（提示等）等

【解决方案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>

待办事项：

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

【讨论】：