As per the requirement I need work on two different projects, one is in Angular 12, and another is in Angular 16. I am trying to apply different font-styles in p-editor, and I want to show the text with the applied font-styles in browser output.
I have created one small sample Application to verify this behavior, and below are my experiences.
From the above image:
- My concentration is on point (1) where I have applied three different kinds of fonts.
- I have entered the content in point (2) just to make sure that html tags were generated properly in the generated output.
- Point (3) represents the generated output. By seeing the output, I can understand that bold, italic, and underline behaviors work well. But I think that ql-font-serif, ql-font-monospace fonts cannot be recognized by the browser.
Can someone please suggest me if I am missing something, or if everything is right, is there anything more that I need to do to be able to show these fonts in the browser without any issue?
Regards, Ashok Kumar K.
Code is much less as itself generates the complete editor. Below is the code in app.component.html page.
<p-editor [(ngModel)]="htmlContent" [style]="{ height: '320px' }">
</p-editor>
{{ htmlContent }}