How to style fonts from a WordPress object

I am getting an object from WordPress.

Main problem: when I go to WordPress posts in my application, they all have a different font, what should I do to style these fonts?

Here's a Plunkr just in case you want to try it, click on any of the titles that take you to a different look, there you can see what I'm talking about.

This is the view where I need to style the fonts

<script id="tab-post-detail.html" type="text/ng-template">

        <div>
          <h3>{{:: post.title}}</h3>
          <p ng-bind-html=" post.content"></p>
        </div>
      </div>

</script>

      

here you can see Object

+3


source to share


3 answers


Add the class to <div>

:

<script id="tab-post-detail.html" type="text/ng-template">
  <div class="tab-post-item">
    <h3>{{:: post.title}}</h3>
    <p ng-bind-html=" post.content"></p>
   </div>
  </div>

</script>

      

And in your CSS:



.tab-post-item h3 {
 font-family: Arial, sans-serif;
 font-size: 18px;
 font-weight: normal;
}
.tab-post-item p {
 font-family: Verdana, sans-serif;
 font-size: 14px;
}

      

You probably want to suffix each CSS entry with the importance of overriding inline styling from an object.

+2


source


Since all of the content comes from many separate unknown sites and can include any inline style, you need to be quite aggressive in order for it all to match the consistent style across your application.

It's important to understand that any Wordpress blogger can apply any style to any element. In addition, they might use tags like <h1>

or <h2>

, which are much smaller than the norm due to the styles in their themes, but might look out of place in your application.


Several possible options:

Write target css reset

with help !important

for all rules and properties. Should be complete enough and specific to the inner container to which the content will be added.



or

Create a div outside the dom and skip all posts. Place the content of the post inside the created div and search for all elements with the attribute style

and remove that attribute. Can work with available css drops and just add suffixes for your container


The second approach is most likely the best (and least time consuming) since you know you are down to reasonably unpainted elements other than your own css. however, you may need to use both approaches.

+2


source


You can use angular directive ng-style

See here for details .

I have updated the plunker http://plnkr.co/edit/nRBtPziUrGOaFN6mnO8d?p=preview

I added this to the controller and then attached ng-style = "mystyle"

to the appropriate tags<h1> <p>

$scope.myStyle = {
    "font-family":"courier",
};

      

I installed the font by courier, but obviously you can choose any font you like

+1


source







All Articles