查找動態寬度的最大字體大小

我使用的是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-spacingfont-family或其他方面而改變。也許由於這種複雜性，最好用JavaScript或PHP進行計算。

來源

2011-09-14 Patrick Robert Shea O' Connor

你可以把這個問題歸結爲一個問題嗎？ –

我一直在努力，找到了適合我需求的解決方案。該解決方案僅在知道以下情況時才起作用。

正在使用
確切的文本基於父字體大小被使用
默認寬度的字體

DEMO： 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的（鉻/ Safari瀏覽器）的browers一個已知的問題。 WebKit瀏覽器渲染@ font-face字體比他們應該更厚，從而使$ logoDefaultWidth不正確。我正在努力研究如何阻止WebKit使字體變得如此厚實，或者爲WebKit單獨計算。

來源

2011-09-14 22:28:42

你不能在服務器端做到這一點，因爲用戶的字體可能有任何尺寸。你必須在JavaScript中使用瀏覽器。

來源

2011-09-14 18:48:04 arnaud576875

我用@fontface提供自己的字體，那樣，我可以做些什麼服務器端？我找到一個使用Java和一些庫的例子，它們檢測一堆關於字體尺寸的東西;不過，我正在使用PHP，到目前爲止還沒有發現任何東西。 –

正如您所見，即使使用@fontface，字體的寬度取決於渲染引擎，用戶設置（提示等）等 – arnaud576875

查找動態寬度的最大字體大小

回答

相關問題