查找最大字體大小以獲取動態寬度
[英]Find max font-size for dynamic width
問題描述
我正在使用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進行計算。
2 個解決方案
解決方案1
0 2011-09-14 18:48:04
您不能在服務器端執行此操作，因為用戶的字體可以具有任意尺寸。 您必須在瀏覽器中的javascript中進行操作。
解決方案2
0 已采納
我已經完成了工作，找到了適合我需求的解決方案。 該解決方案僅在以下情況下有效。
- 使用的確切文字
- 使用的字體
- 默認寬度基於父字體大小
演示： 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進行單獨計算。
HTML表格中的PHP字體大小
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.