相关疑难解决方法(0)

使用@ font-face将文本绘制到<canvas>在第一次时不起作用

当我在带有通过@ font-face加载的字体的画布上绘制文本时,文本无法正确显示.它根本不显示(在Chrome 13和Firefox 5中),或者字体错误(Opera 11).此类意外行为仅在第一次使用字体绘图时发生.之后一切正常.

这是标准行为还是什么?

谢谢.

PS:以下是测试用例的源代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>@font-face and &lt;canvas&gt;</title>
        <style id="css">
@font-face {
    font-family: 'Press Start 2P';
    src: url('fonts/PressStart2P.ttf');
}
        </style>
        <style>
canvas, pre {
    border: 1px solid black;
    padding: 0 1em;
}
        </style>
    </head>
    <body>
        <h1>@font-face and &lt;canvas&gt;</h1>
        <p>
            Description: click the button several times, and you will see the problem.
            The first line won't show at all, or with a wrong typeface even if it does.
            <strong>If you have visited …
Run Code Online (Sandbox Code Playgroud)

html5 canvas font-face

85
推荐指数
6
解决办法
7万
查看次数

如何知道是否已加载字体(@ font-face)?

我正在使用Font-Awesome,但是在未加载字体文件时,图标显示为.

所以,我希望这些图标display:none不会加载文件.

@font-face {
  font-family: "FontAwesome";
  src: url('../font/fontawesome-webfont.eot');
  src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'), url('../font/fontawesome-webfont.woff') format('woff'), url('../font/fontawesome-webfont.ttf') format('truetype'), url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');
  font-weight: normal;
  font-style: normal;
}
Run Code Online (Sandbox Code Playgroud)

我怎么知道这些文件已经加载,我终于能够显示图标了?

编辑: 我没有在页面加载(onload)时说话,因为字体可以在整个页面之前加载.

javascript css jquery font-face font-awesome

78
推荐指数
4
解决办法
6万
查看次数

在呈现网页之前等待加载字体

我正在使用@ font-face在我的网站中嵌入字体.首先,文本呈现为系统默认值,然后(一旦字体文件可能已加载),正确的字体稍后呈现一小段时间.有没有办法最小化/摆脱这种延迟,通过延迟页面渲染,直到字体加载或类似.

css fonts font-face

55
推荐指数
7
解决办法
6万
查看次数

所有css字体属性的一个css声明

将所有css字体属性放入一个值的正确语法是什么.

body {font: 12px, arial, red}
Run Code Online (Sandbox Code Playgroud)

类似的东西,但有所有选择器和属性.

css

12
推荐指数
2
解决办法
2万
查看次数

如何在html画布上绘制字体真棒图标

如何在html5画布上绘制Font Awesome字符(Icons Glyphs)?

如何设置绘制的角色?

<script>

    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    context.font = '';
    context.fillText();

</script>
Run Code Online (Sandbox Code Playgroud)

语言:lang-html

<canvas id="myCanvas" class="canvas" width="500" height="500" ></canvas>html>

<script>

    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    context.font = '';
    context.fillText();

</script>
Run Code Online (Sandbox Code Playgroud)

语言:lang-html

<canvas id="myCanvas" class="canvas" width="500" height="500" ></canvas>
Run Code Online (Sandbox Code Playgroud)

javascript html5-canvas font-awesome

12
推荐指数
2
解决办法
1万
查看次数

加载字体后调用jQuery函数.

我在网站上有多种字体它加载速度非常慢,我有一些jquery功能,我需要在加载字体时加载它们.

我试着打电话给它

jQuery(window).load(function () { 
 //my_function()
});
Run Code Online (Sandbox Code Playgroud)

不工作怎么办???

jquery load

7
推荐指数
2
解决办法
7540
查看次数

有没有办法确定字体系列何时实际渲染

有没有办法确定字体样式何时实际渲染? 断点的早期阶段

在早期阶段(即创建 DOM 之后)有断点表明该段落的字体系列值是字体“Montserrat-Bold”,它是通过 @font-face css 添加的,但实际渲染的显示显示为默认字体。

一段时间后的断点

在这里,一段时间后的断点表明段落元素实际上已按预期设置了样式(使用字体系列)。

我假设有一个浏览器实际渲染(或应用)字体样式的过程。有没有办法知道或检测何时发生这种情况?

html javascript css fonts

5
推荐指数
1
解决办法
633
查看次数

标签 统计

css ×4

font-face ×3

javascript ×3

font-awesome ×2

fonts ×2

jquery ×2

canvas ×1

html ×1

html5 ×1

html5-canvas ×1

load ×1