查找最大字体大小以获取动态宽度

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>

此等式中的未知变量是<span>标记上的font-size 。 我将其设置为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>

去做：

该解决方案存在WebKit（Chrome / Safari）浏览器的已知问题。 WebKit浏览器呈现的@ font-face字体比其应有的粗得多，因此使$ logoDefaultWidth错误。 我正在尝试找出如何阻止WebKit使字体变粗，或针对WebKit进行单独计算。

查找最大字体大小以获取动态宽度

问题描述

2 个解决方案

解决方案1
0 2011-09-14 18:48:04

解决方案2
0 已采纳

查找最大字体大小以获取动态宽度

问题描述

2 个解决方案

解决方案1 0 2011-09-14 18:48:04

解决方案2 0 已采纳

解决方案1
0 2011-09-14 18:48:04

解决方案2
0 已采纳