When working with a barcode font in Chrome, using style.fontFamily may not be effective, but utilizing className can achieve the desired result

Take a look at this HTML snippet:

<style>
.barcode { font-family: 'BC C39 3 to 1 Medium'; }
</style>
<div><span id='spn'>1234567</span></div>

This code will apply a barcode font style:

<script>
document.getElementById('spn').className = 'barcode';
</script>

However, the following code won't work:

<script>
document.getElementById('spn').style.fontFamily = 'BC C39 3 to 1 Medium';
</script>

Why is that?

I'm trying to use the style.fontFamily property instead of className, but it doesn't seem to be working for some reason.

Answer №1

Although you may have already found the solution, I will provide further explanation:

If you were to write

fontFamily = 'BC C39 3 to 1 Medium';
, it is essentially the same as writing:

.barcode { font-family: BC C39 3 to 1 Medium; }

According to the information on MDN regarding valid family names, there is a specific requirement:

Font family names must be enclosed in quotes or written unquoted with one or more identifiers. Special characters and numbers at the beginning of each token in unquoted font family names need to be escaped.

Therefore, when your font name lacks quotation marks, it is considered invalid due to the inclusion of 3 and 1. This holds true even if you utilize style.fontFamily, which is why it should be defined as follows:

document.getElementById('spn').style.fontFamily = "'BC C39 3 to 1 Medium'";

For proper formatting, it's recommended to either enclose 3 and 1 in quotes or escape them individually.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Redux action intensifies upon socket events

I have a Reactjs and Redux application that works well with axios. However, I would like to integrate socket.io into it. In my redux action, I tried the following: export const getOne = (id) => async dispatch => { socket.emit('getOne', i ...

Retrieving previous data following an AJAX request using the GET method in Laravel 5.5

I have encountered an issue while using two ajax calls on a single page. On one side, I am making an ajax post request to store data and submit color in a database called "color_store." On the other side, I am trying to retrieve all the colors from that ta ...

default browser's drag and reposition feature

I'm trying to make an image draggable on my webpage by using default browser behavior, but it's not working for some reason. Here is the code snippet I'm using: <div style="position:relative;width:1000px; height:900px;border:solid;z-inde ...

Guide to sending a POST request from within my application

I'm facing an issue with using $resource for making a post request in my app. Here is the code snippet from my Angular module: angular.module('myApp').factory('Product', ['$resource', function ($resource) { ...

Adjusting the height of one element based on the height of another element in multiple cases using jQuery

I am currently using jQuery to retrieve the height of one div and apply that value as a CSS property to another. Let's take a look at a sample layout: <div class="row"> <div class="column image"> <img src="image.jpg" /> < ...

Element numbering in Internet Explorer 9 now positioned towards the right bottom corner

Whenever I reload the page, the numbering in the li elements seems to shift towards the bottom-right only in IE9, while it displays correctly on other browsers like Firefox and Chrome. Should I implement a specific fix for IE or have I made an error in my ...

What steps can I take to fix the sum function?

My function calculates heart rate targets for sports, but there seems to be an issue in the switch statement. The final sum in the function is not being computed properly. For example, if someone is 20 years old with a resting heart rate of 50 beats per mi ...

- "Utilizing the _underscore loop within a design framework"

I am encountering a persistent error while working on this. Specifically, I keep receiving an error related to syntax: syntax error var _p=[],print=function(){_p.push.a... ');}return __p.join(''); <script id="product" type="text/t ...

Tips on skipping the need to repeatedly use `@ApiProperty()` for every dto in NestJs-swagger

I'm currently exploring ways to streamline the process of specifying @ApiProperty() for each DTO. I've heard about a method involving the creation of a nest-cli.json file, where if you define Promise<DTO> in your controller within nest-swa ...

The CSS code designed to limit the display to only a two-line sentence is failing to work properly in Internet Explorer

I've implemented the following CSS code to ensure that the display sentence doesn't exceed 2 lines, with the remaining text being replaced by "...". .bell-notification-max-words-display { overflow: hidden; display: -webkit-box; ...

PHP loading incorrect CSS file

I have a question about how I am linking a CSS file in my PHP program: <html> <head> <title>Untitled Document</title> <link href='sa_mal_link_1.css' rel='stylesheet' type='text/css'> </head> ...

What is the process for submitting a record to a table following the activation of a JavaScript link or button

I am working on creating a like-unlike button below each post for registered users to interact with. I have successfully created the button itself, but now I need to figure out how to store records when a user clicks the button. My idea is to utilize a tab ...

Tips for implementing a fallback image in v-img using Vuetify

Within my Vuetify application, I am utilizing a v-img component and I am looking to implement a fallback image in case the primary one fails to load. <v-img :src="cPicture" contain v-on:error="onImgError"></v-img> cPicture ...

React is failing to display identical values for each item being mapped in the same sequence

I have implemented some standard mapping logic. {MEMBERSHIPS.map((mItem, index) => ( <TableCell className="text-uppercase text-center" colSpan={2} padding="dense" ...

Searching for the desktop location using Node.js

As discussed in the Node.js - Find home directory in a platform-agnostic way question, we can locate the home directory using the following code: const homedir = require('os').homedir(); However, how can I locate the desktop folder in Windows r ...

displaying a confirmation alert upon unchecking a checkbox using javascript

I am trying to implement a feature where a message saying "are you sure?" pops up when the user tries to uncheck a checkbox. If they choose "yes", then the checkbox should be unchecked, and if they choose "no" it should remain checked. I'm new to Java ...

Vue js is throwing an error because it is unable to find the "buscador" property or method that is being referenced in the render function

I am currently diving into the world of laravel combined with Vue js. I am working on integrating a search engine using vue js components, and I would greatly appreciate any help you can provide. Thank you in advance. Below is the Vue js component where t ...

Determining the Percentage of a Bar Chart

When utilizing Chart.js along with the fork available at (https://github.com/leighquince/Chart.js), I successfully developed a bar chart featuring 3 bars: Goal, Actual, and Available data. My challenge lies in finding a method to calculate the percentage ...

The transitions in Vue do not seem to be functioning properly when used with router-link and $router

I have the following structure in my App.vue file: <script setup> import { RouterView } from "vue-router"; </script> <template> <RouterView v-slot="{ Component }"> <transition :name="fade" mod ...

What is preventing NgClass from applying the CSS styles?

I'm currently facing an issue in Angular2 where I am trying to apply different styles using ngClass within an 'NgFor' loop, but for some reason, it's not working as expected. Apologies for any language errors. <div class='line ...