Как стилизовать текст, созданный JavaScript, используя @ font-face CSS - PullRequest
Новая
       15

Как стилизовать текст, созданный JavaScript, используя @ font-face CSS

2 голосов
/ 27 июля 2011

Я пытаюсь создать страницу, которая использует java-скрипт для получения данных через PHP, а затем отображать его, используя собственный шрифт, объявленный в таблице стилей CSS.На всей странице должен использоваться один пользовательский шрифт, который я объявил в основном файле CSS с помощью @ font-face, например: 

@font-face {
    font-family: 'bauhaus';
    src: url('fonts/Bauhaus.woff') format('woff'),
    font-weight: normal;
    font-style: normal; }

Мой HTML-файл выглядит следующим образом: 

<html>  
<head> 
    <script type="text/javascript" src="resources/raphael-min.js"></script>  
    <script type="text/javascript" src="resources/index.js"></script> 
    <link href="Main.css" rel="stylesheet" type="text/css">
    <style type="text/css">  
        #canvas_container {  
            width: 100%;  
            border: 1px solid #aaa; 
            font-family:'bauhaus', "Times New Roman", Times, serif;
        }  
    </style>  
</head>  
<body>  
    <div id="canvas_container">FONTTEST</div>  
</body>  
</html>

Внутри index.js я могу создавать текстовые объекты с использованием синтаксиса Raphaeljs следующим образом: 

var txt = paper.text(150, 590, 'Test123').attr({'font-family': bauhaus, 'font-size':'70', fill:'#000'});

Если я сделаю это так, текст 'Test123' вообще не появится (я полагаю, потому что он не может найти илииспользуйте стиль 'bauhaus'), и если я удаляю атрибут font-family, он показывает мне текст, используя стиль браузера по умолчанию, который в моем случае - Arial.С другой стороны, текст «FONTTEST» отображается правильно с использованием правильного шрифта @ font-face.

Теперь мой вопрос заключается в том, как автоматически создавать текст, созданный Raphaeljs (или другими библиотеками Javascript), в стиле, объявленномзаявления CSS?Мне нравится использовать пользовательские шрифты, но я не могу найти правильного решения о том, как легко использовать стилизованный текст с Javascript.

Спасибо за вашу помощь!

Ответы [ 4 ]

3 голосов
/ 27 июля 2011

Вместо того, чтобы записывать свои атрибуты CSS в строке в вашем JS, почему бы не изменить свой CSS вверху с #canvas_container на .canvas_container, а затем поставить атрибут "class = 'canvas_container'" на все ваши элементы, которыеВы хотите этот шрифт?Должно быть проще указать атрибут класса, чем атрибут style.

Еще лучший подход, если вы хотите, чтобы вся страница использовала ваш шрифт, состоял бы в том, чтобы поместить это в ваш CSS (в вашем случае стильelement): 

html, body { font-family: 'bauhaus', "Times New Roman", Times, serif; }

Это заставит все элементы HTML и BODY использовать ваш шрифт, если только они не будут перезаписаны.

1 голос
/ 30 июля 2011

Что ж, после небольшого поиска кода Рафаэля я обнаружил, что он автоматически устанавливает собственный стиль шрифта (Arial) для всех своих текстовых элементов. Я не думаю, что это действительно имеет смысл, тем более, что я не мог понять, как переопределить его шрифтом CSS '@ font-face', но все в порядке. Моим решением было просто удалить автоматическую настройку атрибута шрифта в исходном коде Рафаэля.

Для всех, кто заинтересован, он находится в той части, где объявлено theText. Просто удалите бит font: availableAttrs.font в res.attrs, и все будет соответствовать желаемому стилю CSS.

0 голосов
/ 10 октября 2011

Вам необходимо зарегистрировать шрифт с помощью cufon. См http://raphaeljs.com/reference.html#Raphael.registerFont и https://github.com/sorccu/cufon/wiki/about.

0 голосов
/ 27 июля 2011

Вы можете назначить стиль вашего текста явно, не думая о том, что на самом деле делает.

Напишите определенную функцию объекта-стайлера, например: 

function Styler( style )
{
  this._style = style;

  this.get = function( text)
  {
    return "<span style=" + this._style + "'>" + text + "</span>";
  }
}

, а затем используйте везде: 

myStyler = new Styler( 'font-size: 20px; font-weight: bold' );

    ...

    text1 = myStyler.get( "text1" );
    text2 = myStyler.get( "text2" );
...