0

How do you define a variable label in an array? At least that is what I imagine it would be called, but my terms 'variable', 'label' and 'array' are probably incorrect terms.

I am working with an svg-edit and have embedded some fonts to use with the editor.

My original TTF file was converted using Font Squirrel

The problem, is that the Font Squirrel conversion renames the 'font-family' in the css that is necessary for working with the javascript that is responsible for using these fonts in the editor.

In my example the original TTF font-family is: Accent SF, and the after the conversion it is AccentCasual, (note the 'space' between Accent and SF).

That is the problem, the space between Accent and SF.

Why is this such a big problem? Well when I open the svg files that are originally created in Inkscape, into the svg-edit, then the svg-edit software does not recognize the font, due to this minor discrepancy, and vice-versa.

I can manually open the svg file in Notepadd++ and correct the discrepancy, but this is not a solution.

Hence, I need to modify the css and js to match. in the css, it is a very simple solution to add a space, and the css and js need to match, the js, it is not, as everything I have tried fails.

What I NEED to know is how to modify the javascript for the online version, simply by adding that 'space' in the name, again from 'Accent-SF' to exactly 'Accent SF'

Here is the the entire css (from its own separate file) note the 'font-family' I have already changed this to read 'Accent SF' to what I need.

@font-face {
    font-family: 'Accent SF';
    src: url('font-files/acce-webfont.eot');
    src: url('font-files/acce-webfont.eot?#iefix') format('embedded-opentype'),
         url('font-files/acce-webfont.woff') format('woff'),
         url('font-files/acce-webfont.ttf') format('truetype'),
         url('font-files/acce-webfont.svg#accent_sfregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

Here is a snipit of the js code: Not the 'font-family' as 'Accent-SF' I NEED to remove the '-' so that it matches the css version of 'Accent SF' exactly

    Smm.fonts = {
      AccentCasual: {
        cssFile: 'accent_sfregular.css',
        imageFile: 'accent_casual.png',
        loadType: 'custom',
        loaded: false
    }
};

Hopefully this makes sense of exactly what I am asking and what I need.

Seems simple to correct the javascript from 'AccentCasual' to 'Accent SF' but when I add a 'space' the javascript fails.

Jonathan Hall
  • 75,165
  • 16
  • 143
  • 189
Mahogan
  • 63
  • 3
  • 10
  • I'm still not sure what you mean by "variable label": can you explain? – Anderson Green Nov 27 '13 at 02:16
  • 3
    `Accent-SF` -> `'Accent SF'`, just quote it to not cause errors with the space, but then you'll have to get it with `Smm.fonts['Accent SF']` – adeneo Nov 27 '13 at 02:19
  • You can't really use `-` in JavaScript variable names. It tries to evaluate it as a `subtract` math operation – jasonscript Nov 27 '13 at 02:32
  • Okay, then I guess my example is incorrect, sorry about that. Actually in the original code Font Squirrel changed the original ttf font-family of: 'Accent SF' to 'AccentCasual' so in my example above, it should have read, I need to change both the CSS and the JS to be 'Accent SF' from 'AccentCasual' Hopefully that will clarify the details. ( I will edit the above post to correspond with this correction) – Mahogan Nov 27 '13 at 02:41
  • I can't quite understand. In the JS, there is no reference to "Accent-SF". Please edit your question with more code. – Dr Rob Lang Nov 27 '13 at 10:21

1 Answers1

1

What you want to change is the property name of an object.

Here's your object:

Smm.fonts = {
    AccentCasual: { ... }
}

It has one property, AccentCasual. Property names in object literals that only consist of alphanumeric characters do not need to be surrounded by quotes. However, property names that are not purely alphanumeric (spaces, dashes, etc.) must be quoted:

Smm.fonts = {
    "Accent SF": { ... }
}
apsillers
  • 112,806
  • 17
  • 235
  • 239