假设我的页面中有以下CSS规则:
body {
font-family: Calibri, Trebuchet MS, Helvetica, sans-serif;
}
Run Code Online (Sandbox Code Playgroud)
如何检测用户浏览器中使用了哪一种已定义的字体?
编辑让人想知道为什么我要这样做:我检测的字体包含其他字体不可用的字形,当用户没有字体时我想显示一个链接,要求用户下载该字体,以便他们可以使用我的Web应用程序与正确的字体.
目前我正在显示所有用户的下载字体链接,我想只显示没有安装正确字体的人.
这是mycode和JSFiddle的链接.
HTML
<input type="button" id="export" value="Export"/>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<text x="162" text-anchor="middle" class="highcharts-title" zindex="4" style="color:#333333;font-size:18px;font-weight:normal;text-decoration:normal;font-family:Lucida Grande,Lucida Sans Unicode, Arial, Helvetica, sans-serif;visibility:visible;fill:#333333;width:260px;" y="25">Inventory</text>
</svg>
Run Code Online (Sandbox Code Playgroud)
JS
$(document).ready(function(){
$('#export').on('click', function() {
html2canvas(document.body, {
onrendered: function(canvas) {
document.body.appendChild(canvas);
},
});
});
});
Run Code Online (Sandbox Code Playgroud)
我正在尝试使用html2canvas库将svg转换为canvas图像.在示例中,我只是将画布图像附加到输出.您可以清楚地看到文本成倍增加.任何人都可以建议我解决这个问题.
希望我的问题很明确.提前致谢.
我正在尝试将一些文本写入canvas元素,但似乎我放入的字体选项被完全忽略了.无论我改变它们,它都是相同的,我相信它是默认的10px sans-serif.继承人我所拥有的(此功能在加载时运行)
function start()
{
canvas = document.getElementById('c');
ctx = canvas.getContext('2d');
ctx.fillStyle = "white";
ctx.font = "12px monospace";
ctx.textBaseline = "top";
}
Run Code Online (Sandbox Code Playgroud)
它在Firefox或Chrome中都不起作用.
可能重复:
列出用户浏览器可以显示的每种字体
我正在开发一个应用程序,用户可以使用选择框选择font-family.但我不知道如何从浏览器获得支持的字体系列.
是否有可能获得浏览器支持的font-family列表?
如果有,怎么样?
有没有办法让用户用Javascript从自己的计算机上选择字体?
抱歉,如果这听起来有点基础,但我用谷歌搜索了它,我发现的只是数十万个关于如何使用style.fontFamily. 然而,这不是我的问题所在。我已经知道如何设置字体了。
我想允许用户将某段文本设置为他们可以自己选择的某种字体。就像这个小提琴一样。
<p>
Type a font name: <input id="font" /> and click
<button type="button" id="button">here</button>
</p>
<p id="example">
And this is the text that will be displayed in the chosen font.
</p>
Run Code Online (Sandbox Code Playgroud)
document.getElementById('button').onclick = function() {
document.getElementById('example').style.fontFamily =
document.getElementById('font').value;
};
Run Code Online (Sandbox Code Playgroud)
除非我希望输入datalist包含用户计算机上的字体名称。或者它可以是一个select.
有些库乍一看很有前途,例如“JQuery Font Chooser”,但它也使用预设列表,而不是使用实际可用的字体。
到目前为止,似乎无法从客户端计算机获取字体名称......