<div class="container">
  <div class="element">
    <p class="first">My font family name is "Open Sans". I have an italic style embedded. <span>I have the italic face applied to me. The browser will use the italic face from my font family to give me the italic style.</span></p>
    <br>
    <p class="second">My font family name is "Oswald", I have no italic or oblique faces. <span>I have <code>font-style: italic</code> applied to me. Since I don't have an italic face, the browser will synthesize one for me.</span></p>  
    <br> 
    <p class="third">
      My font family is the generic serif. <span>I have <code>font-style: italic</code> applied to me. In case I don't have an italic face, the browser will synthesize one for me.</span>
    </p> 
    <br> 
    <p class="forth">
      My font family is the generic serif. <span>I have <code>font-style: oblique</code> applied to me. In case I don't have an oblique face, the browser will synthesize one for me.</span>
    </p> 
  </div>
  <p>
    Note how the last two paragraphs have the same synthesized style, even though one of them is set to italic and the other one is oblique. Since the generic font family does not come with italic or oblique faces, the browser synthesized the faces. They look almost identical.
  </p>
</div>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400);
@import url(http://fonts.googleapis.com/css?family=Oswald);
body {
  background-color: #e1e4fd;
  color: #555;
  font-size: 1.2em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  margin: 40px auto 0;
  width: 90%;
}

.element {
  padding: 20px;
  background-color: #fff;
  color: #333;
}

.element span {
  color: #9175bd;
}

.first {
  font-family: 'Open Sans', sans-serif;
}

.first span {
  font-style: italic;
}

.second {
  font-family: 'Oswald', sans-serif;
  font-style: serif;
}

.second span {
  font-style: italic;
}

.third {
  font-family: serif;
}

.third span {
  font-style: italic;
}

.forth {
  font-family: serif;
}

.forth span {
  font-style: oblique;
}